React: When calling a useTransition startTransition callback outside of event handlers, isPending is never set to true

[kentcdodds]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

isPending is never set to true when calling startTransition within useEffect, but it does work properly when within a useLayoutEffect.

https://codesandbox.io/s/usetransition-useeffect-issues-p1j9s

Here's the correct behavior (accomplished via useLayoutEffect):

Here's the incorrect behavior (via useEffect):

Note the difference is that the opacity never changes to 0.4 (which is determined based on the isPending state).

What is the expected behavior?

I expect them to both behave the same (at least as far as the user can observe).

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• [email protected]
• [email protected]

[dai-shi]

I guess startTransition is never intended to be used in effects. I didn't expect it even works.
Looking at the doc again,
https://reactjs.org/docs/concurrent-mode-reference.html#usetransition
Hmm, it doesn't clearly say so. 😓

[leonardoelias]

Ok @dai-shi but the use cases is interesting.

[gaearon]

Do you think this is the same as https://github.com/facebook/react/issues/17279?

[kentcdodds]

Yes, I believe that's the same issue.

[Lenne231]

Hello,

I think I have a similar issue when using useTransition with useReducer. When useReducer returns a new value I would like to create a new resource. I tried to use useMemo for this, but I don't even have an idea where to put startTransition ...

https://codesandbox.io/s/usetransition-usereducer-i03wk

[lintuming]

@kentcdodds you can see the isPending is true if the timeoutMS is bigger than 5100 when calling in useEffect.

[jhuleatt]

I'm seeing the same behavior as @lintuming - setting timeoutMS to a value of 5200 or higher causes isPending to fire reliably in the original CodeSandbox: https://codesandbox.io/s/usetransition-useeffect-issues-pgzo9?fontsize=14&hidenavigation=1&theme=dark

[gaearon]

That is a bug we need to fix regardless.

[acdlite]

Fixed by #17382. Updated Sandbox: https://codesandbox.io/s/usetransition-useeffect-issues-ccq5e