Legacy migration
Maintaining an older React application that still imports render from react-dom.
React 19+ · Function
render
Deprecated legacy API that mounts a React node into a browser DOM element. React 19+ code should use createRoot from react-dom/client instead.
How it works
The legacy render function places a React node into a browser DOM element and optionally invokes a callback after placement. It was replaced by createRoot in React 18, so React 19+ applications should create a root and call its render method instead.
Syntax
render(reactNode, domNode, callback?)Parameters
| Name | Type | Description |
|---|---|---|
reactNode | ReactNode | The React node to display, commonly JSX but also an element, string, number, null, or undefined. |
domNode | Element | The browser DOM element whose contents React will manage. |
callback | () => void | Optional function invoked after the component is placed into the DOM. |
Returns
Usually null; for a class component, an instance of that component may be returned.
Key points
- Its purpose is to mount a React node into a browser DOM container.
- The function starts displaying the supplied component tree in the chosen element.
- The first argument is commonly JSX, although other React-node values are accepted.
- The second argument determines where the supplied React content appears.
- After mounting, React controls updates within that container.
- The optional callback runs after the component has been inserted.
- For React 19+ applications, use createRoot rather than this deprecated function.
Common mistakes
- Do not use this API for new React 19+ code; createRoot is the supported replacement.
- Existing usage is transitional and may stop working after a future major release.
- Do not expect a root handle from the function.
- The return value is an unusual legacy exception for class components, not a general-purpose application API.
Example: React 19+ replacement
import { createRoot } from 'react-dom/client';
import App from './App.js';
const container = document.getElementById('root');
if (!container) throw new Error('Missing root element');
createRoot(container).render(<App />);Use the supported React 19+ root API instead of the deprecated render function.
When to use it
Codebase maintenance
Understanding an existing entry point before replacing its mounting logic.
Interview questions
QWhat does the legacy render function do?
The function accepts a React node, a browser DOM element, and an optional callback. React takes ownership of the DOM inside the supplied element and updates it as the React tree changes.
Follow-up: What should replace it in React 19? Use createRoot from react-dom/client, then call the root object's render method with the application component.
QWhat are the main arguments?
The React node is the content to display, such as JSX, an element made with createElement, text, a number, null, or undefined. The DOM element is the container whose contents React manages.
Follow-up: Can the container be any value? No; it must be a DOM element suitable for browser rendering.
QWhat does render return?
The function generally returns null. A legacy class-component case can instead produce an instance of that component, but this should not be used as a reason to retain the deprecated API.
Follow-up: How should modern code access an application root? Keep the root returned by createRoot and use its render method; do not depend on the old function's return behavior.
Related
createRootcreateElementReactNode