Supporting render and createRoot

[dayhaysoos]

Just wondering what the best practices around this would look like. Could it be something as simple as checking if ReactDOM.createRoot is true or not, or is there something else we should be doing?

Also, is the Context API exactly the same for either? With use-shopping-cart, to take advantage of the redux implementation, there's a Provider component that's offered to wrap around your react app. Could there be any issues I come across if someone is using React 18?

[gaearon]

Just wondering what the best practices around this would look like. Could it be something as simple as checking if ReactDOM.createRoot is true or not, or is there something else we should be doing?

Could you clarify if you're talking from an application, library, or framework perspective?

• Application: You probably wouldn't want to use both at the same time. If you have a production experiment setup, it makes sense to temporarily do A/B testing while you're switching over, but then you'd stay at createRoot.
• Library: Most libraries shouldn't call either render or createRoot. Since that's done by the application. A library typically provides components. If you need to render to another DOM tree, you should use Portals for this.
• Framework: Ideally, it would detect 18 and switch to createRoot by default there. I guess testing for its presence would work. @devknoll @timneutkens, what does Next does? We wouldn't want to give the impression that 18 is designed to work with render in long term, since it would print a deprecation message and not support the new features.

[Andarist]

Re how does next do it: https://github.com/vercel/next.js/blob/12c5693ef55709ee7380ee89a1d228cfdf06ca2d/packages/next/client/index.tsx#L509-L525

It's all conditionally used within Next.js's code.

[dayhaysoos]

For me personally, I was asking from a library perspective, but I figured I'd ask a more general question for others. Thank you for the response!

[devknoll]

FWIW __NEXT_REACT_ROOT will automatically default to true when used with React 18 in future versions of Next.

[gaearon]

Also, is the Context API exactly the same for either?

There are no differences in the context API.

Could there be any issues I come across if someone is using React 18?

I wouldn't expect anything in particular. Give it a try?