React@canary async action bug monkey patch

README.md

Bug Reproduction CodeSandbox

wtf going on React?

ReactDOMFiberAsync-test.js

  // @gate enableAsyncActions
  it('transition should be commited for long async action', async () => {
    let startTransition;
    function App() {
      const [isPending, _startTransition] = React.useTransition();
      startTransition = _startTransition;
      Scheduler.log(`isPending:${JSON.stringify(isPending)}`);
      return null;
    }
    const root = ReactDOMClient.createRoot(container);
    await act(async () => {
      root.render(<App />);
    });
    assertLog(['isPending:false']);

    let resolvePromise; 
    let promise = new Promise((resolve) => {
      resolvePromise = resolve;
    });
    await act(() => {
      startTransition(() => promise);
    });
    assertLog(['isPending:true']);

    await act(async () => {  
      Scheduler.unstable_advanceTime(5000);
      resolvePromise();
    });
    assertLog(['isPending:false']); // it fails

    await act(() => {
      root.unmount();
    });
  })

useMonkeyPatchedTransition.tsx

function useMonkeyPatchedTransition() {
  const [isPending, _startTransition] = useTransition();
  const [_, forceUpdate] = useState(0);

  const startTransition: typeof _startTransition = useCallback((transitionScope) => {
    _startTransition(() => {
      let maybeThenable = transitionScope();
      if (maybeThenable == null) {
        return;
      }
      maybeThenable.then(
        () => forceUpdate((x) => x + 1),
        () => forceUpdate((x) => x + 1)
      );
      return maybeThenable as any;
    });
  }, []);

  return [isPending, startTransition] as const;
}