reagent-project/reagent

ReactDOM.render is no longer supported in React 18. Use createRoot instead.

piotr-yuxuan opened this issue · 3 comments

Hello, thanks for this great project.

FYI after upgrading to React 18 I can see in my browser console:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Referring to React doc:

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

However as of now the only way I'm aware of creating a root is to use reagent.dom/render that uses:

(defn- render-comp [comp container callback]
  (binding [util/*always-update* true]
    (react-dom/render (comp) container
      (fn []
        (binding [util/*always-update* false]
          (swap! roots assoc container comp)
          (batch/flush-after-render)
          (if (some? callback)
            (callback)))))))

Do you plan to upgrade, would you consider reviewing PR on that?

I've already worked on this, but React 18 requires other changes also: #554

Sorry for my lack of due diligence. I'm very impressed by your good work! 👍 I'll let you decide whether this issue shall stay open or closed.

Experimental React 18 support was released in 1.2.0 with new reagent.dom.client ns with wrapper fns for the new createRoot API.