Discuss react-dom/client and apis available on it.

The react-dom/client APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A framework may call them for you. Most of your components don’t need to import or use them.

1
createRoot lets you create a root to display React components inside a browser DOM node.
2
hydrateRoot lets you display React components inside a browser DOM node whose HTML content was previously generated by react-dom/server.

Difficulty: 5/10

Topics: createRoot, hydrateRoot, concurrent rendering

Scenario Questions

0-2 years experience

1
You need to render a simple component in a new project using React 18. How would you set up the entry point with react-dom/client?
2
What happens if you call ReactDOM.render instead of createRoot in a React 18 app? Explain the difference in behavior.

2-5 years experience

1
Your team upgraded to React 18 and some components are not updating after state changes. How would you debug if the issue is related to using the wrong root API?
2
When adding server-side rendering, you need to hydrate the markup. Which API from react-dom/client would you use and why?
3
Explain the trade‑offs between using createRoot with strict mode enabled versus the legacy render method in a medium‑size codebase.

5-8 years experience

1
Design a pattern for lazy‑loading a large component tree that ensures concurrent rendering works correctly. Which react-dom/client APIs are involved?
2
Your application experiences memory leaks after navigating between routes. How could misuse of the root API contribute, and how would you fix it?
3
Discuss how you would structure the root initialization to support both client‑side rendering and hydration for a progressive web app.

8+ years experience

1
Your organization is migrating a monorepo of hundreds of React apps from ReactDOM.render to the new root API. What strategy would you propose to minimize risk and ensure consistency across teams?
2
Consider a scenario where you need to support both legacy browsers that don’t understand concurrent features and modern browsers that do. How would you architect the root setup using react-dom/client to handle this gracefully?
3
How would you evaluate the long‑term maintenance impact of adopting concurrent features via createRoot across multiple product lines, and what guidelines would you set for future development?

Follow-up Questions

❓Can you walk me through how you’d enable strict mode with createRoot?
❓What considerations are there when switching from render to hydrateRoot?
❓How does using createRoot affect error boundaries and suspense?