[React 19] useTransition()'s pending state does not go back to false (revision 94eed63c49-20240425) about react

[edunomatseye]

Maybe not a good idea to pass an async value directly or either through a function into state as this behaviour is synchronous. this could result to state inconsistency and also concurrency issues. looking at the delayed function passed into state.

[eps1lon]

I moved the useTransition hook to the top level of the component, which resolved the error.

@nakjun12 Can you provide a repro or diff illustrating what you did? From what I can tell, the original repro is valid.

[alexeyraspopov]

@eps1lon I did try doing so in my repro code. In SimpleControlledDisplay I swapped two lines of code moving transition hook to the beginning.

function SimpleControlledDisplay({
  promise,
  onChange,
}: {
  promise: Promise<number>;
  onChange: (value: Promise<number>) => void;
}) {
+  let [pending, startTransition] = useTransition();
  let value = use(promise);
-  let [pending, startTransition] = useTransition();

And the transition worked as expected, resetting pending flag after transition is complete. Not sure if this is expected behavior, certainly very confusing one. I will attempt to test this later with RC.

[eps1lon]

Does this reproduce in dev and prod?

[alexeyraspopov]

@eps1lon I made production build via npx vite build and the behavior remains the same.

[nakjun12]

Resolving the useTransition Hook Issue: Following Official Documentation

In my opinion, the issue mentioned above is not an actual issue according to the official React documentation. I resolved the problem using the following method:

Solution:

I moved the useTransition hook to the top level of the component, which resolved the error. (https://react.dev/reference/react/useTransition)

Reason:

The official documentation states: "Call useTransition at the top level of your component to mark some state updates as Transitions."

Conclusion:

When using the useTransition hook, it is essential to declare it at the top level of the component.

[nakjun12]

@eps1lon
Please refer to the comment above.