<p dir="auto">I ran into this when implementing Back button transition in a router. Because the transition is inside a browser <code class="notranslate">popstate</code> event, it gets batched with the low pri update, and the pending state doesn't appear.</p>
<p dir="auto">I had to do <a href="https://github.com/gaearon/suspense-experimental-github-demo/blob/cb75d1a71847be85e1365d8b33f766a0d0e21463/src/createRouter.js#L68-L69">this</a> to work around it but it's unfortunate. We might want to fix this by treating pending state as special. Or maybe a warning — but then we need a first-class official API for opting into user blocking pri.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto"><code class="notranslate">isPending</code> is never set to true when calling <code class="notranslate">startTransition</code> within <code class="notranslate">useEffect</code>, but it <em>does</em> work properly when within a <code class="notranslate">useLayoutEffect</code>.</p>
<p dir="auto"><a href="https://codesandbox.io/s/usetransition-useeffect-issues-p1j9s" rel="nofollow">https://codesandbox.io/s/usetransition-useeffect-issues-p1j9s</a></p>
<p dir="auto">Here's the correct behavior (accomplished via <code class="notranslate">useLayoutEffect</code>):</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1500684/68164575-662d7b00-ff1a-11e9-9d02-71d7a22fd5cf.gif"><img src="https://user-images.githubusercontent.com/1500684/68164575-662d7b00-ff1a-11e9-9d02-71d7a22fd5cf.gif" alt="good" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">Here's the incorrect behavior (via <code class="notranslate">useEffect</code>):</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1500684/68164540-4c8c3380-ff1a-11e9-9191-d9c87ddecbed.gif"><img src="https://user-images.githubusercontent.com/1500684/68164540-4c8c3380-ff1a-11e9-9191-d9c87ddecbed.gif" alt="bad" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">Note the difference is that the opacity never changes to 0.4 (which is determined based on the <code class="notranslate">isPending</code> state).</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I expect them to both behave the same (at least as far as the user can observe).</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>
<ul dir="auto">
<li>react@0.0.0-experimental-f6b8d31a7</li>
<li>react-dom@0.0.0-experimental-f6b8d31a7</li>
</ul>