Migrate ReactDOM.render to createRoot in all components

[rahulrana701]

What happened?

ReactDOM.render has been deprecated since React 18, and the recommended approach is to use createRoot from react-dom/client. The current codebase still uses ReactDOM.render in multiple components, which needs to be updated to follow best practices and ensure compatibility with future React versions.

Tasks:
Identify all instances where ReactDOM.render is used.
Replace them with createRoot from react-dom/client.
Ensure components are wrapped inside a root and rendered correctly.
Test to confirm the changes do not break functionality.

It must be done properly because , If we call createRoot multiple times in the same component, you end up creating multiple independent React trees, which can lead to state or context loss.
Thus, the correct approach is to create the root once and reuse it.

Platform

• Chrome (or Chromium based)
• Firefox
• Safari
• Other desktop browser
• Android browser
• iOS browser
• Electron app
• Android mobile app
• iOS mobile app
• Custom app using a mobile SDK

Browser / app / sdk version

131.0.6778.205

Relevant log output

react-dom.development.js:86 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.

Reproducibility

• The problem is reproducible on meet.jit.si

More details?

No response

[rahulrana701]

@saghul what's your take on this ?

[saghul]

Last I checked it's not a drop-in replacement because it implies using concurrent rendering which I'm not sure our codebase is ready to handle.