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

[mxmul]

Recreating #28457, which was closed due to staleness.

Maybe a weird edge case, but this caused an unexpected visual change in our app when migrating a root from ReactDOM.render.

React version: 18.2.0

Steps To Reproduce

1. Define a component that has some state, and a useLayoutEffect that modifies the state in a requestAnimationFrame callback. like:

function App() {
  const [message, setMessage] = React.useState("Loading...");

  React.useLayoutEffect(() => {
    requestAnimationFrame(() => {
      setMessage("Ready");
    });
  });
  return <p>{message}</p>;
}

2. Mount the component using ReactDOM.render, and you will never observe the component with its initial state ("Loading..."). Only the updated state ("Ready").
3. Mount the component with createRoot and root.render, and you will observe the component render twice. Once with the initial state ("Loading..."), then with the updated state ("Ready").

Link to code example: https://codepen.io/mxmul/pen/abMexLe

react-batching.webm

The current behavior

Two renders - once with the initial state, and a second with the updated state.

The expected behavior

A single render with the updated state. This seems to be the behavior before React 18.

[chiragjha1]

This behavior is expected in concurrent rendering and StrictMode in React 18.

To solve this issue,

• Move state updates from useLayoutEffect to useEffect
• Use React.startTransition for non-urgent updates
• Opt out of StrictMode during development if necessary