Bug: state update from a rAF in useLayoutEffect not batched when using `createRoot`

[mxmul]

Bug: state update from a rAF in useLayoutEffect not batched when using `createRoot`

[Hariprasadweb]

it is working

import React from "https://esm.sh/[email protected]";
import ReactDOM from "https://esm.sh/[email protected]";
import cx from "https://esm.sh/[email protected]";

function App({ initialMessage }) {
const [message, setMessage] = React.useState(initialMessage); // Set initial state to the provided message

React.useEffect(() => {
requestAnimationFrame(() => {
setMessage("Ready");
});
}, []);

return (
<p className={cx("app", message === "Ready" ? "ready" : "loading")}>
{message}

);
}

function RemountOnClick({ children }) {
const [count, setCount] = React.useState(0);

const handleClick = () => {
setCount((n) => n + 1);
};

return (

Remount

Remount count: {count} {children}

);
}

const root = ReactDOM.createRoot(document.getElementById("modern-root"));
root.render(



);

ReactDOM.render(


,
document.getElementById("legacy-root")
);

[Hariprasadweb]

react red flash fix.txt

I have added txt file. please share wheather it is only problem or i misunderstood the problem.

[mxmul]

Thanks, but I think this misses the point. This bug report is about React failing to batch a render caused by an immediate state change - your fix only removes the state change.

[mxmul]

A workaround that does work is to wrap the state change with flushSync, like:

React.useLayoutEffect(() => {
  requestAnimationFrame(() => {
    ReactDOM.flushSync(() => {
      setMessage("Ready");
    });
  });
});

But this still seems like a regression to me.

[erikasby]

I checked the code of ReactDOM.render() and ReactDOM.createRoot().render().

Seems like the legacy version always runs flushSync() (seems like modern version does not):

function legacyCreateRootFromDOMContainer(
  container: Container,
  initialChildren: ReactNodeList,
  parentComponent: ?React$Component<any, any>,
  callback: ?Function,
  isHydrationContainer: boolean,
): FiberRoot {
  if (isHydrationContainer) {
    // ...

    flushSync();
    return root;
  } else {
    // First clear any existing content.
    clearContainer(container);

    // ...

    // Initial mount should not be batched.
    flushSync(() => {
      updateContainer(initialChildren, root, parentComponent, callback);
    });

    return root;
  }
}

React will execute flushSync() callback synchronously, applying any updates to the component tree immediately. This ensures that all state and props changes are reflected in the DOM before the method returns.

I guess that's why your workaround solves your issue.

[erikasby]

But I will check a little bit more - it looks like sometimes it also appears instantly as "Ready" on average after ~20 re-renders (for me), seems like worth to investigate this part as well.

[erikasby]

Bundled your example with Vite to check how it is represented there with and without your workaround of flushSync() and really see not much of difference (except the additional 7k lines of .js code 😆). From what I understand:

• ReactDOM.render() is synchronous and does not support concurrent rendering, e.g. React attempts to render the entire component tree in a single go, which causes the "Loading..." message to briefly appear before the UI with the "Ready" message is rendered.

• ReactDOM.createRoot().render() enables concurrent rendering, e.g. rendering is split into smaller chunks and updates that are more important for interactivity are prioritized, 2 e.g. React implies that "Loading" is unnecessary to show, because "Ready" is already ready for rendering. (This also explains the occasional "Ready" with ReactDOM.createRoot().render()).