Questions
3 of 5
Basics
JSX
Virtual DOM
Reconciliation
State and Props
Components
Class Components
Function Components
Lifecycle functions
Code Sharing
Hooks
useState
useReducer
useMemo
useContext
useCallback
useEffect
Custom Hooks
New Hooks
HOC
Refs
Data Sharing
Events
Context API
Redux
Router
CSR-SSR
React APIs
Performance Optimisation
ReactDOM
Strict Mode
Security
Discuss react-dom/client and apis available on it.
Difficulty: 5/10
createRoot, hydrateRoot, concurrent rendering
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.
Scenario Questions
0-2 years experience
- 1You 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?
- 2What happens if you call ReactDOM.render instead of createRoot in a React 18 app? Explain the difference in behavior.
2-5 years experience
- 1Your 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?
- 2When adding server-side rendering, you need to hydrate the markup. Which API from react-dom/client would you use and why?
- 3Explain the trade‑offs between using createRoot with strict mode enabled versus the legacy render method in a medium‑size codebase.
5-8 years experience
- 1Design a pattern for lazy‑loading a large component tree that ensures concurrent rendering works correctly. Which react-dom/client APIs are involved?
- 2Your application experiences memory leaks after navigating between routes. How could misuse of the root API contribute, and how would you fix it?
- 3Discuss how you would structure the root initialization to support both client‑side rendering and hydration for a progressive web app.
8+ years experience
- 1Your 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?
- 2Consider 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?
- 3How 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?