title: react error boundry and deferred calculation
body: <p>In this situation:</p>
  <pre><code>const A = () =&gt; (
    &lt;B 
      calc={() =&gt; {throw Error('error!')}
    /&gt;
  );
  
  const B = ({calc}) =&gt; (
    &lt;ErrorBoundry&gt;
      &lt;div&gt;result: {calc()}&lt;/div&gt;
    &lt;/ErrorBoundry&gt;
  );
  </code></pre>
  <p>(assuming that ErrorBoundry is the classic, simple ErrorBoundry form the react docs)
  I see that the error is not caught by the error boundry. If I put the error boundry in <code>A</code>:</p>
  <pre><code>const A = () =&gt; (
    &lt;ErrorBoundry&gt;
      &lt;B 
        calc={() =&gt; {throw Error('error!')}
      /&gt;
    &lt;/ErrorBoundry&gt;
  );
  
  const B = ({calc}) =&gt; (
    &lt;div&gt;result: {calc()}&lt;/div&gt;
  );
  </code></pre>
  <p>It will be caught in A.
  This is a bit confusing to me since the calculation is actually run on B's rendering, not A's.
  so I fail to understand why having the ErrorBoundry in <code>B</code> won't catch the error.</p>