This API will be removed in a future major version of React.
In React 18, render was replaced by createRoot. Using render in React 18 will warn that your app will behave as if it’s running React 17. Learn more here.
render renders a piece of JSX (“React node”) into a browser DOM node.
render(reactNode, domNode, callback?)
render(reactNode, domNode, callback?)
Call render to display a React component inside a browser DOM element.
import { render } from 'react-dom';
const domNode = document.getElementById('root');
render(<App />, domNode);
React will display <App /> in the domNode, and take over managing the DOM inside it.
An app fully built with React will usually only have one render call with its root component. A page that uses “sprinkles” of React for parts of the page may have as many render calls as needed.
reactNode: A React node that you want to display. This will usually be a piece of JSX like <App />, but you can also pass a React element constructed with createElement(), a string, a number, null, or undefined.
domNode: A DOM element. React will display the reactNode you pass inside this DOM element. From this moment, React will manage the DOM inside the domNode and update it when your React tree changes.
optional callback: A function. If passed, React will call it after your component is placed into the DOM.
render usually returns null. However, if the reactNode you pass is a class component, then it will return an instance of that component.
In React 18, render was replaced by createRoot. Please use createRoot for React 18 and beyond.
The first time you call render, React will clear all the existing HTML content inside the domNode before rendering the React component into it. If your domNode contains HTML generated by React on the server or during the build, use hydrate() instead, which attaches the event handlers to the existing HTML.
If you call render on the same domNode more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by “matching it up” with the previously rendered tree. Calling render on the same domNode again is similar to calling the set function on the root component: React avoids unnecessary DOM updates.
If your app is fully built with React, you’ll likely have only one render call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn’t a child of your component (for example, a modal or a tooltip), use createPortal instead of render.
Call render to display a React component inside a browser DOM node.
import { render } from 'react-dom';
import App from './App.js';
render(<App />, document.getElementById('root'));
In apps fully built with React, you will usually only do this once at startup—to render the “root” component.
Usually you shouldn’t need to call render again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will use state.
If your page isn’t fully built with React, call render for each top-level piece of UI managed by React.
You can destroy the rendered trees with unmountComponentAtNode().
You can call render more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will preserve the state. Notice how you can type in the input, which means that the updates from repeated render calls every second are not destructive:
It is uncommon to call render multiple times. Usually, you’ll update state inside your components instead.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4