render

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?)

---

Reference

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.

See more examples below.

Parameters

• 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.

Returns

render usually returns null. However, if the reactNode you pass is a class component, then it will return an instance of that component.

Caveats

• 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.

---

Usage

Call render to display a React component inside a 2>browser DOM node.

import { render } from 'react-dom';
import App from './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.

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

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

export default function App() {
  return <h1>Hello, world!</h1>;
}

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.

---

Rendering multiple roots

If your page isn't fully built with React, call render for each top-level piece of UI managed by React.

<nav id="navigation"></nav>
<main>
  <p>This paragraph is not rendered by React (open index.html to verify).</p>
  <section id="comments"></section>
</main>

import './styles.css';
import { render } from 'react-dom';
import { Comments, Navigation } from './Components.js';

render(
  <Navigation />,
  document.getElementById('navigation')
);

render(
  <Comments />,
  document.getElementById('comments')
);

export function Navigation() {
  return (
    <ul>
      <NavLink href="/">Home</NavLink>
      <NavLink href="/about">About</NavLink>
    </ul>
  );
}

function NavLink({ href, children }) {
  return (
    <li>
      <a href={href}>{children}</a>
    </li>
  );
}

export function Comments() {
  return (
    <>
      <h2>Comments</h2>
      <Comment text="Hello!" author="Sophie" />
      <Comment text="How are you?" author="Sunil" />
    </>
  );
}

function Comment({ text, author }) {
  return (
    <p>{text} — <i>{author}</i></p>
  );
}

nav ul { padding: 0; margin: 0; }
nav ul li { display: inline-block; margin-right: 20px; }

You can destroy the rendered trees with unmountComponentAtNode().

---

Updating the rendered tree

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:

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

let i = 0;
setInterval(() => {
  render(
    <App counter={i} />,
    document.getElementById('root')
  );
  i++;
}, 1000);

export default function App({counter}) {
  return (
    <>
      <h1>Hello, world! {counter}</h1>
      <input placeholder="Type something here" />
    </>
  );
}

It is uncommon to call render multiple times. Usually, you'll update state inside your components instead.