Hydration not fully compatible with React 18

[simongray]

Attempting to hydrate while using React 18 results in the following warning:

react-dom.development.js:87 Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot 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

I guess the fix is simple enough in the frontend, e.g. detect whether React 17 or 18 is loaded and call the appropriate function, but should anything be done server-side as well?

[tonsky]

Sounds good. Re: server, as long as client expects exactly the same output, no

[simongray]

I made the changes to the ClojureScript ns to get it working (using this as reference: https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis).

Not too bad all-in-all, just need to store the root and reuse it instead of the DOM node.

However, I'm at a loss at how to resolve the new react package. Personally, I use shadow-cljs in my projects, but Rum seems wedded to cljsjs (which is fine). I don't know how to dynamically refer to "react-dom/client" which is where these new imports are located. The current :require has:

[cljsjs.react]
[cljsjs.react.dom]

[simongray]

Turns out I had to do

["react-dom/client" :as rdc]

and then use that directly rather than js/ReactDOM.

However, this might work with shadow-cljs, but I guess it would break with users of cljsjs? I'm not smart enough to know.

Proof-of-concept available at: https://github.com/kuhumcst/rum/tree/fix/250-react-18

[aiba]

Hi, just exploring rum and wondering what the latest story is with react 18. @simongray - perhaps you could submit your proof of concept as a PR so rum can officially get up to react 18?