useTransition's startTransition function can result in infinite loop when it's included as a useEffect dependency

[kentcdodds]

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

Bug

What is the current behavior?

I've narrowed it down to this:

https://codesandbox.io/s/usetransition-useeffect-dependency-issue-2olmx

Basically, what I think is important is:

1. There's a state change resulting in the useEffect being called
2. The useEffect callback starts a transition
3. The transition callback sets state
4. The set state results in a render which suspends

If these are all the case, then including the startTransition function in the dependency array will trigger an infinite loop. In the codesandbox I have a safety in place so your browser doesn't fall over.

What is the expected behavior?

The startTransition function should be consistent between renders.

I've observed that if you do not inline the config to useTransition then this is not a problem. I know that the docs recommend keeping this config consistent, but if this is desirable behavior, then maybe a warning about this particular situation in the docs would be useful. I expect that inlining the config will be pretty natural for people.

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

• react@0.0.0-experimental-f6b8d31a7
• react-dom@0.0.0-experimental-f6b8d31a7

[kentcdodds]

Made this to track a known bug: https://twitter.com/acdlite/status/1191470032624078848

[acdlite]

#17284