State doesn't update with React 18 and new createRoot api react-dom/client

[Juliangzr]

I've migrated my application to React 18 and i've noticed that the state isn't updating if i use the new root api to render the application (react-dom/client). When i change to the old root api it starts to work again

// React 18 - Old root Api - Works Fine

import ReactDOM from 'react-dom';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

// React 18 - New Way - Doesn't Work

import { createRoot } from "react-dom/client";

const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
<App />
);

I am using the following packages:

• "react": "^18.2.0"
• "react-dom": "^18.2.0"
• "pullstate": "^1.25.0"
• Node.js v20.4.0

I want to use the new root api because if i don't use it, the new performance optimizations of React 18 aren't enabled

[lostpebble]

Hi @Juliangzr - we've been using the new way on our apps for a while now and we're not experiencing issues with the updates. Please could you create a small repro and we can see if there is something else going on here.

[Juliangzr]

Hello, i will try to reproduce it, but it's difficult because it's a big application. But i can tell for sure that when using createRoot there are problems updating the state. I just spent more than an hour experimenting random problems updating the state, until i changed again to the old way of rendering the app and all the problems were solved immediately.

[lostpebble]

Just try create the most minimal version where things are not updating using the new method. I think there may be something in your configuration that's causing it- cause I also have a very large app using the new method and haven't run into any issues. It's hard for me to debug just from your current description.

[Juliangzr]

Ok, i am 100% sure that there's a problem. I will try to make a minimal app to show you.