Discuss apis and other entry points available on react-dom package.

In order to solve cross browser compatibility issues, your event handlers in React will be passed instances of SyntheticEvent, which is React’s cross-browser wrapper around the browser’s native event. These synthetic events have the same interface as native events you’re used to, except they work identically across all browsers.

These APIs can be imported from your components.

1
createPortal lets you render child components in a different part of the DOM tree.
2
flushSync lets you force React to flush a state update and update the DOM synchronously.

The react-dom package provides two additional entry points:

1
react-dom/client contains APIs to render React components on the client (in the browser).
2
react-dom/server contains APIs to render React components on the server.

Difficulty: 5/10

Topics: rendering, portals, hydration

Scenario Questions

0-2 years experience

1
You need to mount a <Dashboard> component into a div with id 'root'. Walk me through the exact ReactDOM call you would use.
2
If you call ReactDOM.render twice on the same container with different components, what will the user see and why?
3
How would you unmount a component when a modal is closed using ReactDOM APIs?

2-5 years experience

1
Your app uses server‑side rendering and you notice a hydration warning about mismatched markup. How would you use ReactDOM.hydrate to address this, and what could cause the warning?
2
You added a portal to render a tooltip into document.body, but the tooltip sometimes doesn't receive focus events. How would you debug this using ReactDOM APIs?
3
Explain why you might choose ReactDOM.flushSync in a click handler that updates state and then reads the DOM immediately.

5-8 years experience

1
Discuss the performance trade‑offs of using findDOMNode versus ref callbacks in a large codebase. When would you allow findDOMNode, and how would you mitigate its drawbacks?
2
Your team is migrating from ReactDOM.render to the new concurrent root API (createRoot). What steps would you take to ensure a smooth transition, and what pitfalls should you watch for?
3
Design a reusable component library that needs to render modals and tooltips across many applications. How would you structure the library's use of ReactDOM.createPortal to avoid z‑index and event‑bubbling issues?

8+ years experience

1
At a company with multiple front‑end teams, you need to define a long‑term strategy for handling direct DOM manipulation (e.g., third‑party widgets) while staying within React's declarative model. How would you standardize the use of ReactDOM entry points like render, hydrate, and portals across teams?
2
Your organization is deprecating findDOMNode and other legacy ReactDOM APIs. Propose a migration plan that balances legacy code, testing, and release cadence, and explain how you would enforce the new guidelines.
3
Consider a high‑traffic e‑commerce site that uses server‑side rendering, streaming hydration, and many portals for overlays. How would you architect the interaction between ReactDOM's concurrent root, hydration, and portal rendering to maximize performance and SEO while keeping the code maintainable?

Follow-up Questions

❓What would happen if you called hydrate on a client‑only component?
❓Can you think of a scenario where using findDOMNode could cause a memory leak?
❓How does createPortal affect event propagation compared to normal rendering?