render

render(reactNode,domNode,callback?)

• Reference
  • render(reactNode, domNode, callback?)
• Usage
  • Rendering the root component
  • Rendering multiple roots
  • Updating the rendered tree

Reference

render(reactNode, domNode, callback?)

Callrender to display a React component inside a browser DOM element.

import{render}from'react-dom';

constdomNode =document.getElementById('root');
render(<App/>,domNode);

React will display<App /> in thedomNode, and take over managing the DOM inside it.

An app fully built with React will usually only have onerender call with its root component. A page that uses “sprinkles” of React for parts of the page may have as manyrender calls as needed.

See more examples below.

Parameters

• reactNode: AReact 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 withcreateElement(), a string, a number,null, orundefined.

• domNode: ADOM element. React will display thereactNode you pass inside this DOM element. From this moment, React will manage the DOM inside thedomNode and update it when your React tree changes.

• optionalcallback: A function. If passed, React will call it after your component is placed into the DOM.

Returns

render usually returnsnull. However, if thereactNode you pass is aclass component, then it will return an instance of that component.

Caveats

• In React 18,render was replaced bycreateRoot. Please usecreateRoot for React 18 and beyond.

• The first time you callrender, React will clear all the existing HTML content inside thedomNode before rendering the React component into it. If yourdomNode contains HTML generated by React on the server or during the build, usehydrate() instead, which attaches the event handlers to the existing HTML.

• If you callrender on the samedomNode 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. Callingrender on the samedomNode again is similar to calling theset function on the root component: React avoids unnecessary DOM updates.

• If your app is fully built with React, you’ll likely have only onerender 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), usecreatePortal instead ofrender.

Usage

Callrender to display aReact component inside abrowser DOM node.

import{render}from'react-dom';
importAppfrom'./App.js';

render(<App />,document.getElementById('root'));

Rendering the root component

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 callrender 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 willuse state.

Rendering multiple roots

If your pageisn’t fully built with React, callrender for each top-level piece of UI managed by React.

You can destroy the rendered trees withunmountComponentAtNode().

Updating the rendered tree

You can callrender more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React willpreserve the state. Notice how you can type in the input, which means that the updates from repeatedrender calls every second are not destructive:

It is uncommon to callrender multiple times. Usually, you’llupdate state inside your components instead.