<p dir="auto">React version: 16.12.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto">A component that suspends as a result of a context update is never rendered to DOM after suspension is finished.</p>

<p dir="auto">Link to code example:</p>
<p dir="auto"><a href="https://codesandbox.io/s/react-suspense-context-bug-rklls?file=/package.json:163-170" rel="nofollow">https://codesandbox.io/s/react-suspense-context-bug-rklls?file=/package.json:163-170</a></p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">If a component suspends as a result of a context update, the component's render is called after suspension is finished but the result of the render is not reflected in the DOM (and effects aren't called).</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">If a component suspends as a result of a context update, the component's render should be called and flushed to the DOM and effects called.</p>
<h2 dir="auto">Related Issues:</h2>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="522446729" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/17356" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/17356/hovercard" href="https://github.com/facebook/react/issues/17356">#17356</a> - seems related to memoization but this does not use any memoization</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
bug (I think?)</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const [value, setValue] = useState(&quot;default&quot;);
return (
  &lt;div className=&quot;App&quot;&gt;
    &lt;input value={value} onChange={e =&gt; setValue(e.target.value)} /&gt;
    &lt;div&gt;
      &lt;Value.Provider value={value}&gt;
        &lt;Suspense fallback={&lt;div&gt;loading&lt;/div&gt;}&gt;
          &lt;MemoizedChild /&gt;
         &lt;/Suspense&gt;
       &lt;/Value.Provider&gt;
     &lt;/div&gt;
  &lt;/div&gt;
)"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">value</span><span class="pl-kos">,</span> <span class="pl-s1">setValue</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-s">"default"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">return</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"App"</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">value</span><span class="pl-kos">}</span> <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">e</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">setValue</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-v">Value</span><span class="pl-kos">.</span><span class="pl-v">Provider</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">value</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Suspense</span> <span class="pl-c1">fallback</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>loading<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">MemoizedChild</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
         <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Suspense</span><span class="pl-c1">&gt;</span>
       <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-v">Value</span><span class="pl-kos">.</span><span class="pl-v">Provider</span><span class="pl-c1">&gt;</span>
     <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span></pre></div>
<p dir="auto">When using a memoized functional component (<code class="notranslate">MemoizedChild</code> in above example) in conjunction with <code class="notranslate">Context</code> as a child of a <code class="notranslate">React.Suspense</code> component, there seems to be a bug in which <code class="notranslate">MemoizedChild</code> does not update when the context it uses changes. For the full example, see my codesandbox below.</p>
<p dir="auto">In the codesandbox, if you change the value of the input, the new value is provided to the context which causes the hook used in <code class="notranslate">MemoizedChild</code> (<code class="notranslate">useValue</code>) to throw a promise. This flips <code class="notranslate">Suspense</code> to the fallback state and when the promise resolves <code class="notranslate">MemoizedChild</code>'s state is not updated with the proper context value because (I'm assuming) the memoized value of <code class="notranslate">MemoizedChild</code> is the one that contained the previous context value and technically no props have changed, so that makes sense why it wouldn't have updated. However, this seems like it would be unexpected behavior.</p>
<p dir="auto"><a href="https://codesandbox.io/s/react-suspense-maybe-bug-sznbk" rel="nofollow">https://codesandbox.io/s/react-suspense-maybe-bug-sznbk</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
I would expect that <code class="notranslate">MemoizedChild</code> would be re-rendered with the new provided value.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
I'm assuming all of them that contain Suspense and memo. So, since 16.8?</p>