reagent-project / reagent

A minimalistic ClojureScript interface to React.js
http://reagent-project.github.io/
MIT License
4.76k stars 414 forks source link

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

Closed piotr-yuxuan closed 2 months ago

piotr-yuxuan commented 2 years ago

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?

Deraen commented 2 years ago

I've already worked on this, but React 18 requires other changes also: https://github.com/reagent-project/reagent/pull/554

piotr-yuxuan commented 2 years ago

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.

Deraen commented 2 months ago

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