<h2 dir="auto">Feature Request</h2>
<p dir="auto">Currently react render children of Suspense with inline style <code class="notranslate">display: none !important</code>, <a href="https://github.com/facebook/react/pull/15861/files">referenced PR</a>. would like to have a prop like <code class="notranslate">mount</code> or sth else to remount the children when suspended state changed.</p>
<h2 dir="auto">Example</h2>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const Chid = () =&gt; 
   // ... 
   return &lt;div&gt;{data}&lt;/div&gt;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">Chid</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> 
   <span class="pl-c">// ... </span>
   <span class="pl-s1">return</span> <span class="pl-c1">&lt;</span><span class="pl-s1">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span>data<span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span>div&gt;</pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Suspense mount fallback={&lt;span&gt;fallback&lt;/span&gt;}&gt;
  &lt;Chid /&gt;
&lt;/Suspense&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Suspense</span> <span class="pl-c1">mount</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">span</span><span class="pl-c1">&gt;</span>fallback<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">span</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">Chid</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></pre></div>
<p dir="auto">the above code will only render fallback component</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;span&gt;fallback&lt;/span&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>fallback<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">instead of</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;span&gt;fallback&lt;/span&gt;
&lt;div style=&quot;display: none !important;&quot;&gt;data&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>fallback<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span>="<span class="pl-s">display: none !important;</span>"<span class="pl-kos">&gt;</span>data<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">It's a feature.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">React.Suspense mounts its children with a <code class="notranslate">display: none</code> style if a promise is thrown. Once the thrown promise is resolved, React removes the <code class="notranslate">display: none</code> style.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The children components have no easy way to know when the <code class="notranslate">display: none</code> style is removed by React. This is problematic when one child component needs to read from the DOM layout to correctly display its elements. Most people wait for the <code class="notranslate">componentDidMount</code> callback to trigger, but because the element is <code class="notranslate">display: none</code>, it can't read any value from the DOM layout.</p>
<p dir="auto">The issue was discovered in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="395613892" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/14077" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/14077/hovercard" href="https://github.com/mui/material-ui/issues/14077">mui/material-ui#14077</a>. I believe that React should provide a lifecycle so the children components know when they are visible, that it's safe to do layout computations.</p>
<p dir="auto">The best workaround I'm aware of it to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" rel="nofollow">Intersection Observer API</a> but it requires a polyfill on IE 11 and Safari.</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></p>
<p dir="auto">Version: 16.7.0-alpha.2</p>