diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index a2bef6bf218..0c04d29dc3e 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -1,1220 +1,1276 @@
----
-title: createRoot
----
-
-<Intro>
-
-`createRoot` lets you create a root to display React components inside a browser DOM node.
-
-```js
-const root = createRoot(domNode, options?)
-```
-
-</Intro>
-
-<InlineToc />
-
----
-
-## Reference {/*reference*/}
-
-### `createRoot(domNode, options?)` {/*createroot*/}
-
-Call `createRoot` to create a React root for displaying content inside a browser DOM element.
-
-```js
-import { createRoot } from 'react-dom/client';
-
-const domNode = document.getElementById('root');
-const root = createRoot(domNode);
-```
-
-React will create a root for the `domNode`, and take over managing the DOM inside it. After you've created a root, you need to call [`root.render`](#root-render) to display a React component inside of it:
-
-```js
-root.render(<App />);
-```
-
-An app fully built with React will usually only have one `createRoot` call for its root component. A page that uses "sprinkles" of React for parts of the page may have as many separate roots as needed.
-
-[See more examples below.](#usage)
-
-#### Parameters {/*parameters*/}
-
-* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will create a root for this DOM element and allow you to call functions on the root, such as `render` to display rendered React content.
-
-* **optional** `options`: An object with options for this React root.
-
-  * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
-  * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
-  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
-  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
-
-#### Returns {/*returns*/}
-
-`createRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount)
-
-#### Caveats {/*caveats*/}
-* If your app is server-rendered, using `createRoot()` is not supported. Use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead.
-* You'll likely have only one `createRoot` 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`](/reference/react-dom/createPortal) instead of `createRoot`.
-
----
-
-### `root.render(reactNode)` {/*root-render*/}
-
-Call `root.render` to display a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into the React root's browser DOM node.
-
-```js
-root.render(<App />);
-```
-
-React will display `<App />` in the `root`, and take over managing the DOM inside it.
-
-[See more examples below.](#usage)
-
-#### Parameters {/*root-render-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()`](/reference/react/createElement), a string, a number, `null`, or `undefined`.
-
-
-#### Returns {/*root-render-returns*/}
-
-`root.render` returns `undefined`.
-
-#### Caveats {/*root-render-caveats*/}
-
-* The first time you call `root.render`, React will clear all the existing HTML content inside the React root before rendering the React component into it.
-
-* If your root's DOM node contains HTML generated by React on the server or during the build, use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead, which attaches the event handlers to the existing HTML.
-
-* If you call `render` on the same root 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"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
-
----
-
-### `root.unmount()` {/*root-unmount*/}
-
-Call `root.unmount` to destroy a rendered tree inside a React root.
-
-```js
-root.unmount();
-```
-
-An app fully built with React will usually not have any calls to `root.unmount`.
-
-This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. In that case, you need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't know to clean up and free up global resources like subscriptions.
-
-Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. 
-
-
-#### Parameters {/*root-unmount-parameters*/}
-
-`root.unmount` does not accept any parameters.
-
-
-#### Returns {/*root-unmount-returns*/}
-
-`root.unmount` returns `undefined`.
-
-#### Caveats {/*root-unmount-caveats*/}
-
-* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node.
-
-* Once you call `root.unmount` you cannot call `root.render` again on the same root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error. However, you can create a new root for the same DOM node after the previous root for that node has been unmounted.
-
----
-
-## Usage {/*usage*/}
-
-### Rendering an app fully built with React {/*rendering-an-app-fully-built-with-react*/}
-
-If your app is fully built with React, create a single root for your entire app.
-
-```js [[1, 3, "document.getElementById('root')"], [2, 4, "<App />"]]
-import { createRoot } from 'react-dom/client';
-
-const root = createRoot(document.getElementById('root'));
-root.render(<App />);
-```
-
-Usually, you only need to run this code once at startup. It will:
-
-1. Find the <CodeStep step={1}>browser DOM node</CodeStep> defined in your HTML.
-2. Display the <CodeStep step={2}>React component</CodeStep> for your app inside.
-
-<Sandpack>
-
-```html index.html
-<!DOCTYPE html>
-<html>
-  <head><title>My app</title></head>
-  <body>
-    <!-- This is the DOM node -->
-    <div id="root"></div>
-  </body>
-</html>
-```
-
-```js src/index.js active
-import { createRoot } from 'react-dom/client';
-import App from './App.js';
-import './styles.css';
-
-const root = createRoot(document.getElementById('root'));
-root.render(<App />);
-```
-
-```js src/App.js
-import { useState } from 'react';
-
-export default function App() {
-  return (
-    <>
-      <h1>Hello, world!</h1>
-      <Counter />
-    </>
-  );
-}
-
-function Counter() {
-  const [count, setCount] = useState(0);
-  return (
-    <button onClick={() => setCount(count + 1)}>
-      You clicked me {count} times
-    </button>
-  );
-}
-```
-
-</Sandpack>
-
-**If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.** 
-
-From this point on, React will manage the DOM of your entire app. To add more components, [nest them inside the `App` component.](/learn/importing-and-exporting-components) When you need to update the UI, each of your components can do this by [using state.](/reference/react/useState) When you need to display extra content like a modal or a tooltip outside the DOM node, [render it with a portal.](/reference/react-dom/createPortal)
-
-<Note>
-
-When your HTML is empty, the user sees a blank page until the app's JavaScript code loads and runs:
-
-```html
-<div id="root"></div>
-```
-
-This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#production-grade-react-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
-
-</Note>
-
-<Pitfall>
-
-**Apps using server rendering or static generation must call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead of `createRoot`.** React will then *hydrate* (reuse) the DOM nodes from your HTML instead of destroying and re-creating them.
-
-</Pitfall>
-
----
-
-### Rendering a page partially built with React {/*rendering-a-page-partially-built-with-react*/}
-
-If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), you can call `createRoot` multiple times to create a root for each top-level piece of UI managed by React. You can display different content in each root by calling [`root.render`.](#root-render)
-
-Here, two different React components are rendered into two DOM nodes defined in the `index.html` file:
-
-<Sandpack>
-
-```html public/index.html
-<!DOCTYPE html>
-<html>
-  <head><title>My app</title></head>
-  <body>
-    <nav id="navigation"></nav>
-    <main>
-      <p>This paragraph is not rendered by React (open index.html to verify).</p>
-      <section id="comments"></section>
-    </main>
-  </body>
-</html>
-```
-
-```js src/index.js active
-import './styles.css';
-import { createRoot } from 'react-dom/client';
-import { Comments, Navigation } from './Components.js';
-
-const navDomNode = document.getElementById('navigation');
-const navRoot = createRoot(navDomNode); 
-navRoot.render(<Navigation />);
-
-const commentDomNode = document.getElementById('comments');
-const commentRoot = createRoot(commentDomNode); 
-commentRoot.render(<Comments />);
-```
-
-```js src/Components.js
-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>
-  );
-}
-```
-
-```css
-nav ul { padding: 0; margin: 0; }
-nav ul li { display: inline-block; margin-right: 20px; }
-```
-
-</Sandpack>
-
-You could also create a new DOM node with [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and add it to the document manually.
-
-```js
-const domNode = document.createElement('div');
-const root = createRoot(domNode); 
-root.render(<Comment />);
-document.body.appendChild(domNode); // You can add it anywhere in the document
-```
-
-To remove the React tree from the DOM node and clean up all the resources used by it, call [`root.unmount`.](#root-unmount)
-
-```js
-root.unmount();
-```
-
-This is mostly useful if your React components are inside an app written in a different framework.
-
----
-
-### Updating a root component {/*updating-a-root-component*/}
-
-You can call `render` more than once on the same root. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive:
-
-<Sandpack>
-
-```js src/index.js active
-import { createRoot } from 'react-dom/client';
-import './styles.css';
-import App from './App.js';
-
-const root = createRoot(document.getElementById('root'));
-
-let i = 0;
-setInterval(() => {
-  root.render(<App counter={i} />);
-  i++;
-}, 1000);
-```
-
-```js src/App.js
-export default function App({counter}) {
-  return (
-    <>
-      <h1>Hello, world! {counter}</h1>
-      <input placeholder="Type something here" />
-    </>
-  );
-}
-```
-
-</Sandpack>
-
-It is uncommon to call `render` multiple times. Usually, your components will [update state](/reference/react/useState) instead.
-
-### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/}
-
-By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
-
-```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
-import { createRoot } from 'react-dom/client';
-
-const root = createRoot(
-  document.getElementById('root'),
-  {
-    onUncaughtError: (error, errorInfo) => {
-      console.error(
-        'Uncaught error',
-        error,
-        errorInfo.componentStack
-      );
-    }
-  }
-);
-root.render(<App />);
-```
-
-The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
-
-1. The <CodeStep step={2}>error</CodeStep> that was thrown.
-2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
-
-You can use the `onUncaughtError` root option to display error dialogs:
-
-<Sandpack>
-
-```html index.html hidden
-<!DOCTYPE html>
-<html>
-<head>
-  <title>My app</title>
-</head>
-<body>
-<!--
-  Error dialog in raw HTML
-  since an error in the React app may crash.
--->
-<div id="error-dialog" class="hidden">
-  <h1 id="error-title" class="text-red"></h1>
-  <h3>
-    <pre id="error-message"></pre>
-  </h3>
-  <p>
-    <pre id="error-body"></pre>
-  </p>
-  <h4 class="-mb-20">This error occurred at:</h4>
-  <pre id="error-component-stack" class="nowrap"></pre>
-  <h4 class="mb-0">Call stack:</h4>
-  <pre id="error-stack" class="nowrap"></pre>
-  <div id="error-cause">
-    <h4 class="mb-0">Caused by:</h4>
-    <pre id="error-cause-message"></pre>
-    <pre id="error-cause-stack" class="nowrap"></pre>
-  </div>
-  <button
-    id="error-close"
-    class="mb-10"
-    onclick="document.getElementById('error-dialog').classList.add('hidden')"
-  >
-    Close
-  </button>
-  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
-</div>
-<!-- This is the DOM node -->
-<div id="root"></div>
-</body>
-</html>
-```
-
-```css src/styles.css active
-label, button { display: block; margin-bottom: 20px; }
-html, body { min-height: 300px; }
-
-#error-dialog {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: white;
-  padding: 15px;
-  opacity: 0.9;
-  text-wrap: wrap;
-  overflow: scroll;
-}
-
-.text-red {
-  color: red;
-}
-
-.-mb-20 {
-  margin-bottom: -20px;
-}
-
-.mb-0 {
-  margin-bottom: 0;
-}
-
-.mb-10 {
-  margin-bottom: 10px;
-}
-
-pre {
-  text-wrap: wrap;
-}
-
-pre.nowrap {
-  text-wrap: nowrap;
-}
-
-.hidden {
- display: none;  
-}
-```
-
-```js src/reportError.js hidden
-function reportError({ title, error, componentStack, dismissable }) {
-  const errorDialog = document.getElementById("error-dialog");
-  const errorTitle = document.getElementById("error-title");
-  const errorMessage = document.getElementById("error-message");
-  const errorBody = document.getElementById("error-body");
-  const errorComponentStack = document.getElementById("error-component-stack");
-  const errorStack = document.getElementById("error-stack");
-  const errorClose = document.getElementById("error-close");
-  const errorCause = document.getElementById("error-cause");
-  const errorCauseMessage = document.getElementById("error-cause-message");
-  const errorCauseStack = document.getElementById("error-cause-stack");
-  const errorNotDismissible = document.getElementById("error-not-dismissible");
-  
-  // Set the title
-  errorTitle.innerText = title;
-  
-  // Display error message and body
-  const [heading, body] = error.message.split(/\n(.*)/s);
-  errorMessage.innerText = heading;
-  if (body) {
-    errorBody.innerText = body;
-  } else {
-    errorBody.innerText = '';
-  }
-
-  // Display component stack
-  errorComponentStack.innerText = componentStack;
-
-  // Display the call stack
-  // Since we already displayed the message, strip it, and the first Error: line.
-  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
-  
-  // Display the cause, if available
-  if (error.cause) {
-    errorCauseMessage.innerText = error.cause.message;
-    errorCauseStack.innerText = error.cause.stack;
-    errorCause.classList.remove('hidden');
-  } else {
-    errorCause.classList.add('hidden');
-  }
-  // Display the close button, if dismissible
-  if (dismissable) {
-    errorNotDismissible.classList.add('hidden');
-    errorClose.classList.remove("hidden");
-  } else {
-    errorNotDismissible.classList.remove('hidden');
-    errorClose.classList.add("hidden");
-  }
-  
-  // Show the dialog
-  errorDialog.classList.remove("hidden");
-}
-
-export function reportCaughtError({error, cause, componentStack}) {
-  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
-}
-
-export function reportUncaughtError({error, cause, componentStack}) {
-  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
-}
-
-export function reportRecoverableError({error, cause, componentStack}) {
-  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
-}
-```
-
-```js src/index.js active
-import { createRoot } from "react-dom/client";
-import App from "./App.js";
-import {reportUncaughtError} from "./reportError";
-import "./styles.css";
-
-const container = document.getElementById("root");
-const root = createRoot(container, {
-  onUncaughtError: (error, errorInfo) => {
-    if (error.message !== 'Known error') {
-      reportUncaughtError({
-        error,
-        componentStack: errorInfo.componentStack
-      });
-    }
-  }
-});
-root.render(<App />);
-```
-
-```js src/App.js
-import { useState } from 'react';
-
-export default function App() {
-  const [throwError, setThrowError] = useState(false);
-  
-  if (throwError) {
-    foo.bar = 'baz';
-  }
-  
-  return (
-    <div>
-      <span>This error shows the error dialog:</span>
-      <button onClick={() => setThrowError(true)}>
-        Throw error
-      </button>
-    </div>
-  );
-}
-```
-
-</Sandpack>
-
-
-### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
-
-By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option to handle errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
-
-```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
-import { createRoot } from 'react-dom/client';
-
-const root = createRoot(
-  document.getElementById('root'),
-  {
-    onCaughtError: (error, errorInfo) => {
-      console.error(
-        'Caught error',
-        error,
-        errorInfo.componentStack
-      );
-    }
-  }
-);
-root.render(<App />);
-```
-
-The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
-
-1. The <CodeStep step={2}>error</CodeStep> that was caught by the boundary.
-2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
-
-You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
-
-<Sandpack>
-
-```html index.html hidden
-<!DOCTYPE html>
-<html>
-<head>
-  <title>My app</title>
-</head>
-<body>
-<!--
-  Error dialog in raw HTML
-  since an error in the React app may crash.
--->
-<div id="error-dialog" class="hidden">
-  <h1 id="error-title" class="text-red"></h1>
-  <h3>
-    <pre id="error-message"></pre>
-  </h3>
-  <p>
-    <pre id="error-body"></pre>
-  </p>
-  <h4 class="-mb-20">This error occurred at:</h4>
-  <pre id="error-component-stack" class="nowrap"></pre>
-  <h4 class="mb-0">Call stack:</h4>
-  <pre id="error-stack" class="nowrap"></pre>
-  <div id="error-cause">
-    <h4 class="mb-0">Caused by:</h4>
-    <pre id="error-cause-message"></pre>
-    <pre id="error-cause-stack" class="nowrap"></pre>
-  </div>
-  <button
-    id="error-close"
-    class="mb-10"
-    onclick="document.getElementById('error-dialog').classList.add('hidden')"
-  >
-    Close
-  </button>
-  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
-</div>
-<!-- This is the DOM node -->
-<div id="root"></div>
-</body>
-</html>
-```
-
-```css src/styles.css active
-label, button { display: block; margin-bottom: 20px; }
-html, body { min-height: 300px; }
-
-#error-dialog {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: white;
-  padding: 15px;
-  opacity: 0.9;
-  text-wrap: wrap;
-  overflow: scroll;
-}
-
-.text-red {
-  color: red;
-}
-
-.-mb-20 {
-  margin-bottom: -20px;
-}
-
-.mb-0 {
-  margin-bottom: 0;
-}
-
-.mb-10 {
-  margin-bottom: 10px;
-}
-
-pre {
-  text-wrap: wrap;
-}
-
-pre.nowrap {
-  text-wrap: nowrap;
-}
-
-.hidden {
- display: none;  
-}
-```
-
-```js src/reportError.js hidden
-function reportError({ title, error, componentStack, dismissable }) {
-  const errorDialog = document.getElementById("error-dialog");
-  const errorTitle = document.getElementById("error-title");
-  const errorMessage = document.getElementById("error-message");
-  const errorBody = document.getElementById("error-body");
-  const errorComponentStack = document.getElementById("error-component-stack");
-  const errorStack = document.getElementById("error-stack");
-  const errorClose = document.getElementById("error-close");
-  const errorCause = document.getElementById("error-cause");
-  const errorCauseMessage = document.getElementById("error-cause-message");
-  const errorCauseStack = document.getElementById("error-cause-stack");
-  const errorNotDismissible = document.getElementById("error-not-dismissible");
-
-  // Set the title
-  errorTitle.innerText = title;
-
-  // Display error message and body
-  const [heading, body] = error.message.split(/\n(.*)/s);
-  errorMessage.innerText = heading;
-  if (body) {
-    errorBody.innerText = body;
-  } else {
-    errorBody.innerText = '';
-  }
-
-  // Display component stack
-  errorComponentStack.innerText = componentStack;
-
-  // Display the call stack
-  // Since we already displayed the message, strip it, and the first Error: line.
-  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
-
-  // Display the cause, if available
-  if (error.cause) {
-    errorCauseMessage.innerText = error.cause.message;
-    errorCauseStack.innerText = error.cause.stack;
-    errorCause.classList.remove('hidden');
-  } else {
-    errorCause.classList.add('hidden');
-  }
-  // Display the close button, if dismissible
-  if (dismissable) {
-    errorNotDismissible.classList.add('hidden');
-    errorClose.classList.remove("hidden");
-  } else {
-    errorNotDismissible.classList.remove('hidden');
-    errorClose.classList.add("hidden");
-  }
-
-  // Show the dialog
-  errorDialog.classList.remove("hidden");
-}
-
-export function reportCaughtError({error, cause, componentStack}) {
-  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
-}
-
-export function reportUncaughtError({error, cause, componentStack}) {
-  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
-}
-
-export function reportRecoverableError({error, cause, componentStack}) {
-  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
-}
-```
-
-```js src/index.js active
-import { createRoot } from "react-dom/client";
-import App from "./App.js";
-import {reportCaughtError} from "./reportError";
-import "./styles.css";
-
-const container = document.getElementById("root");
-const root = createRoot(container, {
-  onCaughtError: (error, errorInfo) => {
-    if (error.message !== 'Known error') {
-      reportCaughtError({
-        error, 
-        componentStack: errorInfo.componentStack,
-      });
-    }
-  }
-});
-root.render(<App />);
-```
-
-```js src/App.js
-import { useState } from 'react';
-import { ErrorBoundary } from "react-error-boundary";
-
-export default function App() {
-  const [error, setError] = useState(null);
-  
-  function handleUnknown() {
-    setError("unknown");
-  }
-
-  function handleKnown() {
-    setError("known");
-  }
-  
-  return (
-    <>
-      <ErrorBoundary
-        fallbackRender={fallbackRender}
-        onReset={(details) => {
-          setError(null);
-        }}
-      >
-        {error != null && <Throw error={error} />}
-        <span>This error will not show the error dialog:</span>
-        <button onClick={handleKnown}>
-          Throw known error
-        </button>
-        <span>This error will show the error dialog:</span>
-        <button onClick={handleUnknown}>
-          Throw unknown error
-        </button>
-      </ErrorBoundary>
-      
-    </>
-  );
-}
-
-function fallbackRender({ resetErrorBoundary }) {
-  return (
-    <div role="alert">
-      <h3>Error Boundary</h3>
-      <p>Something went wrong.</p>
-      <button onClick={resetErrorBoundary}>Reset</button>
-    </div>
-  );
-}
-
-function Throw({error}) {
-  if (error === "known") {
-    throw new Error('Known error')
-  } else {
-    foo.bar = 'baz';
-  }
-}
-```
-
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "19.0.0-rc-3edc000d-20240926",
-    "react-dom": "19.0.0-rc-3edc000d-20240926",
-    "react-scripts": "^5.0.0",
-    "react-error-boundary": "4.0.3"
-  },
-  "main": "/index.js"
-}
-```
-
-</Sandpack>
-
-### Displaying a dialog for recoverable errors {/*displaying-a-dialog-for-recoverable-errors*/}
-
-React may automatically render a component a second time to attempt to recover from an error thrown in render. If successful, React will log a recoverable error to the console to notify the developer. To override this behavior, you can provide the optional `onRecoverableError` root option:
-
-```js [[1, 6, "onRecoverableError"], [2, 6, "error", 1], [3, 10, "error.cause"], [4, 6, "errorInfo"], [5, 11, "componentStack"]]
-import { createRoot } from 'react-dom/client';
-
-const root = createRoot(
-  document.getElementById('root'),
-  {
-    onRecoverableError: (error, errorInfo) => {
-      console.error(
-        'Recoverable error',
-        error,
-        error.cause,
-        errorInfo.componentStack,
-      );
-    }
-  }
-);
-root.render(<App />);
-```
-
-The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called with two arguments:
-
-1. The <CodeStep step={2}>error</CodeStep> that React throws. Some errors may include the original cause as <CodeStep step={3}>error.cause</CodeStep>. 
-2. An <CodeStep step={4}>errorInfo</CodeStep> object that contains the <CodeStep step={5}>componentStack</CodeStep> of the error.
-
-You can use the `onRecoverableError` root option to display error dialogs:
-
-<Sandpack>
-
-```html index.html hidden
-<!DOCTYPE html>
-<html>
-<head>
-  <title>My app</title>
-</head>
-<body>
-<!--
-  Error dialog in raw HTML
-  since an error in the React app may crash.
--->
-<div id="error-dialog" class="hidden">
-  <h1 id="error-title" class="text-red"></h1>
-  <h3>
-    <pre id="error-message"></pre>
-  </h3>
-  <p>
-    <pre id="error-body"></pre>
-  </p>
-  <h4 class="-mb-20">This error occurred at:</h4>
-  <pre id="error-component-stack" class="nowrap"></pre>
-  <h4 class="mb-0">Call stack:</h4>
-  <pre id="error-stack" class="nowrap"></pre>
-  <div id="error-cause">
-    <h4 class="mb-0">Caused by:</h4>
-    <pre id="error-cause-message"></pre>
-    <pre id="error-cause-stack" class="nowrap"></pre>
-  </div>
-  <button
-    id="error-close"
-    class="mb-10"
-    onclick="document.getElementById('error-dialog').classList.add('hidden')"
-  >
-    Close
-  </button>
-  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
-</div>
-<!-- This is the DOM node -->
-<div id="root"></div>
-</body>
-</html>
-```
-
-```css src/styles.css active
-label, button { display: block; margin-bottom: 20px; }
-html, body { min-height: 300px; }
-
-#error-dialog {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: white;
-  padding: 15px;
-  opacity: 0.9;
-  text-wrap: wrap;
-  overflow: scroll;
-}
-
-.text-red {
-  color: red;
-}
-
-.-mb-20 {
-  margin-bottom: -20px;
-}
-
-.mb-0 {
-  margin-bottom: 0;
-}
-
-.mb-10 {
-  margin-bottom: 10px;
-}
-
-pre {
-  text-wrap: wrap;
-}
-
-pre.nowrap {
-  text-wrap: nowrap;
-}
-
-.hidden {
- display: none;  
-}
-```
-
-```js src/reportError.js hidden
-function reportError({ title, error, componentStack, dismissable }) {
-  const errorDialog = document.getElementById("error-dialog");
-  const errorTitle = document.getElementById("error-title");
-  const errorMessage = document.getElementById("error-message");
-  const errorBody = document.getElementById("error-body");
-  const errorComponentStack = document.getElementById("error-component-stack");
-  const errorStack = document.getElementById("error-stack");
-  const errorClose = document.getElementById("error-close");
-  const errorCause = document.getElementById("error-cause");
-  const errorCauseMessage = document.getElementById("error-cause-message");
-  const errorCauseStack = document.getElementById("error-cause-stack");
-  const errorNotDismissible = document.getElementById("error-not-dismissible");
-
-  // Set the title
-  errorTitle.innerText = title;
-
-  // Display error message and body
-  const [heading, body] = error.message.split(/\n(.*)/s);
-  errorMessage.innerText = heading;
-  if (body) {
-    errorBody.innerText = body;
-  } else {
-    errorBody.innerText = '';
-  }
-
-  // Display component stack
-  errorComponentStack.innerText = componentStack;
-
-  // Display the call stack
-  // Since we already displayed the message, strip it, and the first Error: line.
-  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
-
-  // Display the cause, if available
-  if (error.cause) {
-    errorCauseMessage.innerText = error.cause.message;
-    errorCauseStack.innerText = error.cause.stack;
-    errorCause.classList.remove('hidden');
-  } else {
-    errorCause.classList.add('hidden');
-  }
-  // Display the close button, if dismissible
-  if (dismissable) {
-    errorNotDismissible.classList.add('hidden');
-    errorClose.classList.remove("hidden");
-  } else {
-    errorNotDismissible.classList.remove('hidden');
-    errorClose.classList.add("hidden");
-  }
-
-  // Show the dialog
-  errorDialog.classList.remove("hidden");
-}
-
-export function reportCaughtError({error, cause, componentStack}) {
-  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
-}
-
-export function reportUncaughtError({error, cause, componentStack}) {
-  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
-}
-
-export function reportRecoverableError({error, cause, componentStack}) {
-  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
-}
-```
-
-```js src/index.js active
-import { createRoot } from "react-dom/client";
-import App from "./App.js";
-import {reportRecoverableError} from "./reportError";
-import "./styles.css";
-
-const container = document.getElementById("root");
-const root = createRoot(container, {
-  onRecoverableError: (error, errorInfo) => {
-    reportRecoverableError({
-      error,
-      cause: error.cause,
-      componentStack: errorInfo.componentStack,
-    });
-  }
-});
-root.render(<App />);
-```
-
-```js src/App.js
-import { useState } from 'react';
-import { ErrorBoundary } from "react-error-boundary";
-
-// 🚩 Bug: Never do this. This will force an error.
-let errorThrown = false;
-export default function App() {
-  return (
-    <>
-      <ErrorBoundary
-        fallbackRender={fallbackRender}
-      >
-        {!errorThrown && <Throw />}
-        <p>This component threw an error, but recovered during a second render.</p>
-        <p>Since it recovered, no Error Boundary was shown, but <code>onRecoverableError</code> was used to show an error dialog.</p>
-      </ErrorBoundary>
-      
-    </>
-  );
-}
-
-function fallbackRender() {
-  return (
-    <div role="alert">
-      <h3>Error Boundary</h3>
-      <p>Something went wrong.</p>
-    </div>
-  );
-}
-
-function Throw({error}) {
-  // Simulate an external value changing during concurrent render.
-  errorThrown = true;
-  foo.bar = 'baz';
-}
-```
-
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "19.0.0-rc-3edc000d-20240926",
-    "react-dom": "19.0.0-rc-3edc000d-20240926",
-    "react-scripts": "^5.0.0",
-    "react-error-boundary": "4.0.3"
-  },
-  "main": "/index.js"
-}
-```
-
-</Sandpack>
-
-
----
-## Troubleshooting {/*troubleshooting*/}
-
-### I've created a root, but nothing is displayed {/*ive-created-a-root-but-nothing-is-displayed*/}
-
-Make sure you haven't forgotten to actually *render* your app into the root:
-
-```js {5}
-import { createRoot } from 'react-dom/client';
-import App from './App.js';
-
-const root = createRoot(document.getElementById('root'));
-root.render(<App />);
-```
-
-Until you do that, nothing is displayed.
-
----
-
-### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/}
-
-A common mistake is to pass the options for `createRoot` to `root.render(...)`:
-
-<ConsoleBlock level="error">
-
-Warning: You passed a second argument to root.render(...) but it only accepts one argument.
-
-</ConsoleBlock>
-
-To fix, pass the root options to `createRoot(...)`, not `root.render(...)`:
-```js {2,5}
-// 🚩 Wrong: root.render only takes one argument.
-root.render(App, {onUncaughtError});
-
-// ✅ Correct: pass options to createRoot.
-const root = createRoot(container, {onUncaughtError}); 
-root.render(<App />);
-```
-
----
-
-### I'm getting an error: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/}
-
-This error means that whatever you're passing to `createRoot` is not a DOM node.
-
-If you're not sure what's happening, try logging it:
-
-```js {2}
-const domNode = document.getElementById('root');
-console.log(domNode); // ???
-const root = createRoot(domNode);
-root.render(<App />);
-```
-
-For example, if `domNode` is `null`, it means that [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) returned `null`. This will happen if there is no node in the document with the given ID at the time of your call. There may be a few reasons for it:
-
-1. The ID you're looking for might differ from the ID you used in the HTML file. Check for typos!
-2. Your bundle's `<script>` tag cannot "see" any DOM nodes that appear *after* it in the HTML.
-
-Another common way to get this error is to write `createRoot(<App />)` instead of `createRoot(domNode)`.
-
----
-
-### I'm getting an error: "Functions are not valid as a React child." {/*im-getting-an-error-functions-are-not-valid-as-a-react-child*/}
-
-This error means that whatever you're passing to `root.render` is not a React component.
-
-This may happen if you call `root.render` with `Component` instead of `<Component />`:
-
-```js {2,5}
-// 🚩 Wrong: App is a function, not a Component.
-root.render(App);
-
-// ✅ Correct: <App /> is a component.
-root.render(<App />);
-```
-
-Or if you pass a function to `root.render`, instead of the result of calling it:
-
-```js {2,5}
-// 🚩 Wrong: createApp is a function, not a component.
-root.render(createApp);
-
-// ✅ Correct: call createApp to return a component.
-root.render(createApp());
-```
-
----
-
-### My server-rendered HTML gets re-created from scratch {/*my-server-rendered-html-gets-re-created-from-scratch*/}
-
-If your app is server-rendered and includes the initial HTML generated by React, you might notice that creating a root and calling `root.render` deletes all that HTML, and then re-creates all the DOM nodes from scratch. This can be slower, resets focus and scroll positions, and may lose other user input.
-
-Server-rendered apps must use [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead of `createRoot`:
-
-```js {1,4-7}
-import { hydrateRoot } from 'react-dom/client';
-import App from './App.js';
-
-hydrateRoot(
-  document.getElementById('root'),
-  <App />
-);
-```
-
-Note that its API is different. In particular, usually there will be no further `root.render` call.
+---
+title: createRoot
+---
+
+<Intro>
+
+`createRoot` lets you create a root to display React components inside a browser DOM node.
+
+```js
+const root = createRoot(domNode, options?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `createRoot(domNode, options?)` {/*createroot*/}
+
+Call `createRoot` to create a React root for displaying content inside a browser DOM element.
+
+```js
+import { createRoot } from 'react-dom/client';
+
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
+```
+
+React will create a root for the `domNode`, and take over managing the DOM inside it. After you've created a root, you need to call [`root.render`](#root-render) to display a React component inside of it:
+
+```js
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+An app fully built with React will usually only have one `createRoot` call for its root component. A page that uses "sprinkles" of React for parts of the page may have as many separate roots as needed.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will create a root for this DOM element and allow you to call functions on the root, such as `render` to display rendered React content.
+
+* **optional** `options`: An object with options for this React root.
+
+  * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
+
+#### Returns {/*returns*/}
+
+`createRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount)
+
+#### Caveats {/*caveats*/}
+* If your app is server-rendered, using `createRoot()` is not supported. Use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead.
+* You'll likely have only one `createRoot` 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`](/reference/react-dom/createPortal) instead of `createRoot`.
+
+---
+
+### `root.render(reactNode)` {/*root-render*/}
+
+Call `root.render` to display a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into the React root's browser DOM node.
+
+```js
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+React will display `<App />` in the `root`, and take over managing the DOM inside it.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*root-render-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()`](/reference/react/createElement), a string, a number, `null`, or `undefined`.
+
+
+#### Returns {/*root-render-returns*/}
+
+`root.render` returns `undefined`.
+
+#### Caveats {/*root-render-caveats*/}
+
+* The first time you call `root.render`, React will clear all the existing HTML content inside the React root before rendering the React component into it.
+
+* If your root's DOM node contains HTML generated by React on the server or during the build, use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead, which attaches the event handlers to the existing HTML.
+
+* If you call `render` on the same root 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"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
+
+---
+
+### `root.unmount()` {/*root-unmount*/}
+
+Call `root.unmount` to destroy a rendered tree inside a React root.
+
+```js
+root.unmount();
+```
+
+An app fully built with React will usually not have any calls to `root.unmount`.
+
+This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. In that case, you need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't know to clean up and free up global resources like subscriptions.
+
+Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. 
+
+
+#### Parameters {/*root-unmount-parameters*/}
+
+`root.unmount` does not accept any parameters.
+
+
+#### Returns {/*root-unmount-returns*/}
+
+`root.unmount` returns `undefined`.
+
+#### Caveats {/*root-unmount-caveats*/}
+
+* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node.
+
+* Once you call `root.unmount` you cannot call `root.render` again on the same root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error. However, you can create a new root for the same DOM node after the previous root for that node has been unmounted.
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering an app fully built with React {/*rendering-an-app-fully-built-with-react*/}
+
+If your app is fully built with React, create a single root for your entire app.
+
+```js [[1, 3, "document.getElementById('root')"], [2, 4, "<App />"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+Usually, you only need to run this code once at startup. It will:
+
+1. Find the <CodeStep step={1}>browser DOM node</CodeStep> defined in your HTML.
+2. Display the <CodeStep step={2}>React component</CodeStep> for your app inside.
+
+<Sandpack>
+
+```html index.html
+<!DOCTYPE html>
+<html>
+  <head><title>My app</title></head>
+  <body>
+    <!-- This is the DOM node -->
+    <div id="root"></div>
+  </body>
+</html>
+```
+
+```js src/index.js active
+import { createRoot } from 'react-dom/client';
+import App from './App.js';
+import './styles.css';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+```js src/App.js
+import { useState } from 'react';
+
+export default function App() {
+  return (
+    <>
+      <h1>Hello, world!</h1>
+      <Counter />
+    </>
+  );
+}
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount(count + 1)}>
+      You clicked me {count} times
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+**If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.** 
+
+From this point on, React will manage the DOM of your entire app. To add more components, [nest them inside the `App` component.](/learn/importing-and-exporting-components) When you need to update the UI, each of your components can do this by [using state.](/reference/react/useState) When you need to display extra content like a modal or a tooltip outside the DOM node, [render it with a portal.](/reference/react-dom/createPortal)
+
+<Note>
+
+When your HTML is empty, the user sees a blank page until the app's JavaScript code loads and runs:
+
+```html
+<div id="root"></div>
+```
+
+This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#production-grade-react-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
+
+</Note>
+
+<Pitfall>
+
+**Apps using server rendering or static generation must call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead of `createRoot`.** React will then *hydrate* (reuse) the DOM nodes from your HTML instead of destroying and re-creating them.
+
+</Pitfall>
+
+---
+
+### Rendering a page partially built with React {/*rendering-a-page-partially-built-with-react*/}
+
+If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), you can call `createRoot` multiple times to create a root for each top-level piece of UI managed by React. You can display different content in each root by calling [`root.render`.](#root-render)
+
+Here, two different React components are rendered into two DOM nodes defined in the `index.html` file:
+
+<Sandpack>
+
+```html public/index.html
+<!DOCTYPE html>
+<html>
+  <head><title>My app</title></head>
+  <body>
+    <nav id="navigation"></nav>
+    <main>
+      <p>This paragraph is not rendered by React (open index.html to verify).</p>
+      <section id="comments"></section>
+    </main>
+  </body>
+</html>
+```
+
+```js src/index.js active
+import './styles.css';
+import { createRoot } from 'react-dom/client';
+import { Comments, Navigation } from './Components.js';
+
+const navDomNode = document.getElementById('navigation');
+const navRoot = createRoot(navDomNode); 
+navRoot.render(<Navigation />);
+
+const commentDomNode = document.getElementById('comments');
+const commentRoot = createRoot(commentDomNode); 
+commentRoot.render(<Comments />);
+```
+
+```js src/Components.js
+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>
+  );
+}
+```
+
+```css
+nav ul { padding: 0; margin: 0; }
+nav ul li { display: inline-block; margin-right: 20px; }
+```
+
+</Sandpack>
+
+You could also create a new DOM node with [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and add it to the document manually.
+
+```js
+const domNode = document.createElement('div');
+const root = createRoot(domNode); 
+root.render(<Comment />);
+document.body.appendChild(domNode); // You can add it anywhere in the document
+```
+
+To remove the React tree from the DOM node and clean up all the resources used by it, call [`root.unmount`.](#root-unmount)
+
+```js
+root.unmount();
+```
+
+This is mostly useful if your React components are inside an app written in a different framework.
+
+---
+
+### Updating a root component {/*updating-a-root-component*/}
+
+You can call `render` more than once on the same root. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive:
+
+<Sandpack>
+
+```js src/index.js active
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+import App from './App.js';
+
+const root = createRoot(document.getElementById('root'));
+
+let i = 0;
+setInterval(() => {
+  root.render(<App counter={i} />);
+  i++;
+}, 1000);
+```
+
+```js src/App.js
+export default function App({counter}) {
+  return (
+    <>
+      <h1>Hello, world! {counter}</h1>
+      <input placeholder="Type something here" />
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+It is uncommon to call `render` multiple times. Usually, your components will [update state](/reference/react/useState) instead.
+
+### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/}
+
+By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
+
+```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+  document.getElementById('root'),
+  {
+    onUncaughtError: (error, errorInfo) => {
+      console.error(
+        'Uncaught error',
+        error,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was thrown.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+You can use the `onUncaughtError` root option to display error dialogs:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!-- This is the DOM node -->
+<div id="root"></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+  
+  // Set the title
+  errorTitle.innerText = title;
+  
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+  
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+  
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportUncaughtError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+  onUncaughtError: (error, errorInfo) => {
+    if (error.message !== 'Known error') {
+      reportUncaughtError({
+        error,
+        componentStack: errorInfo.componentStack
+      });
+    }
+  }
+});
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+```js src/App.js
+import { useState } from 'react';
+
+export default function App() {
+  const [throwError, setThrowError] = useState(false);
+  
+  if (throwError) {
+    foo.bar = 'baz';
+  }
+  
+  return (
+    <div>
+      <span>This error shows the error dialog:</span>
+      <button onClick={() => setThrowError(true)}>
+        Throw error
+      </button>
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+
+### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
+
+By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option to handle errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
+
+```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+  document.getElementById('root'),
+  {
+    onCaughtError: (error, errorInfo) => {
+      console.error(
+        'Caught error',
+        error,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was caught by the boundary.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!-- This is the DOM node -->
+<div id="root"></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+
+  // Set the title
+  errorTitle.innerText = title;
+
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportCaughtError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+  onCaughtError: (error, errorInfo) => {
+    if (error.message !== 'Known error') {
+      reportCaughtError({
+        error, 
+        componentStack: errorInfo.componentStack,
+      });
+    }
+  }
+});
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+```js src/App.js
+import { useState } from 'react';
+import { ErrorBoundary } from "react-error-boundary";
+
+export default function App() {
+  const [error, setError] = useState(null);
+  
+  function handleUnknown() {
+    setError("unknown");
+  }
+
+  function handleKnown() {
+    setError("known");
+  }
+  
+  return (
+    <>
+      <ErrorBoundary
+        fallbackRender={fallbackRender}
+        onReset={(details) => {
+          setError(null);
+        }}
+      >
+        {error != null && <Throw error={error} />}
+        <span>This error will not show the error dialog:</span>
+        <button onClick={handleKnown}>
+          Throw known error
+        </button>
+        <span>This error will show the error dialog:</span>
+        <button onClick={handleUnknown}>
+          Throw unknown error
+        </button>
+      </ErrorBoundary>
+      
+    </>
+  );
+}
+
+function fallbackRender({ resetErrorBoundary }) {
+  return (
+    <div role="alert">
+      <h3>Error Boundary</h3>
+      <p>Something went wrong.</p>
+      <button onClick={resetErrorBoundary}>Reset</button>
+    </div>
+  );
+}
+
+function Throw({error}) {
+  if (error === "known") {
+    throw new Error('Known error')
+  } else {
+    foo.bar = 'baz';
+  }
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+### Displaying a dialog for recoverable errors {/*displaying-a-dialog-for-recoverable-errors*/}
+
+React may automatically render a component a second time to attempt to recover from an error thrown in render. If successful, React will log a recoverable error to the console to notify the developer. To override this behavior, you can provide the optional `onRecoverableError` root option:
+
+```js [[1, 6, "onRecoverableError"], [2, 6, "error", 1], [3, 10, "error.cause"], [4, 6, "errorInfo"], [5, 11, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+  document.getElementById('root'),
+  {
+    onRecoverableError: (error, errorInfo) => {
+      console.error(
+        'Recoverable error',
+        error,
+        error.cause,
+        errorInfo.componentStack,
+      );
+    }
+  }
+);
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that React throws. Some errors may include the original cause as <CodeStep step={3}>error.cause</CodeStep>. 
+2. An <CodeStep step={4}>errorInfo</CodeStep> object that contains the <CodeStep step={5}>componentStack</CodeStep> of the error.
+
+You can use the `onRecoverableError` root option to display error dialogs:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!-- This is the DOM node -->
+<div id="root"></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+
+  // Set the title
+  errorTitle.innerText = title;
+
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportRecoverableError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+  onRecoverableError: (error, errorInfo) => {
+    reportRecoverableError({
+      error,
+      cause: error.cause,
+      componentStack: errorInfo.componentStack,
+    });
+  }
+});
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+```js src/App.js
+import { useState } from 'react';
+import { ErrorBoundary } from "react-error-boundary";
+
+// 🚩 Bug: Never do this. This will force an error.
+let errorThrown = false;
+export default function App() {
+  return (
+    <>
+      <ErrorBoundary
+        fallbackRender={fallbackRender}
+      >
+        {!errorThrown && <Throw />}
+        <p>This component threw an error, but recovered during a second render.</p>
+        <p>Since it recovered, no Error Boundary was shown, but <code>onRecoverableError</code> was used to show an error dialog.</p>
+      </ErrorBoundary>
+      
+    </>
+  );
+}
+
+function fallbackRender() {
+  return (
+    <div role="alert">
+      <h3>Error Boundary</h3>
+      <p>Something went wrong.</p>
+    </div>
+  );
+}
+
+function Throw({error}) {
+  // Simulate an external value changing during concurrent render.
+  errorThrown = true;
+  foo.bar = 'baz';
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+
+---
+## Troubleshooting {/*troubleshooting*/}
+
+### I've created a root, but nothing is displayed {/*ive-created-a-root-but-nothing-is-displayed*/}
+
+Make sure you haven't forgotten to actually *render* your app into the root:
+
+```js {5}
+import { createRoot } from 'react-dom/client';
+import App from './App.js';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+Until you do that, nothing is displayed.
+
+---
+
+### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/}
+
+A common mistake is to pass the options for `createRoot` to `root.render(...)`:
+
+<ConsoleBlock level="error">
+
+Warning: You passed a second argument to root.render(...) but it only accepts one argument.
+
+</ConsoleBlock>
+
+To fix, pass the root options to `createRoot(...)`, not `root.render(...)`:
+```js {2,5}
+// 🚩 Wrong: root.render only takes one argument.
+root.render(App, {onUncaughtError});
+
+// ✅ Correct: pass options to createRoot.
+const root = createRoot(container, {onUncaughtError}); 
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+---
+
+### I'm getting an error: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/}
+
+This error means that whatever you're passing to `createRoot` is not a DOM node.
+
+If you're not sure what's happening, try logging it:
+
+```js {2}
+const domNode = document.getElementById('root');
+console.log(domNode); // ???
+const root = createRoot(domNode);
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+For example, if `domNode` is `null`, it means that [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) returned `null`. This will happen if there is no node in the document with the given ID at the time of your call. There may be a few reasons for it:
+
+1. The ID you're looking for might differ from the ID you used in the HTML file. Check for typos!
+2. Your bundle's `<script>` tag cannot "see" any DOM nodes that appear *after* it in the HTML.
+
+Another common way to get this error is to write `createRoot(<App />)` instead of `createRoot(domNode)`.
+
+---
+
+### I'm getting an error: "Functions are not valid as a React child." {/*im-getting-an-error-functions-are-not-valid-as-a-react-child*/}
+
+This error means that whatever you're passing to `root.render` is not a React component.
+
+This may happen if you call `root.render` with `Component` instead of `<Component />`:
+
+```js {2,5}
+// 🚩 Wrong: App is a function, not a Component.
+root.render(App);
+
+// ✅ Correct: <App /> is a component.
+root.render(<App />);root.render(<App />);
+
+### DOM Nesting Validation
+
+React performs runtime validation of DOM nesting to ensure valid HTML structure. As of React 18.x, this includes support for `<script>` and `<template>` elements within `<select>` tags, aligning with modern HTML specifications. This validation helps catch common markup errors during development.
+```
+
+Or if you pass a function to `root.render`, instead of the result of calling it:
+
+```js {2,5}
+// 🚩 Wrong: createApp is a function, not a component.
+root.render(createApp);
+
+// ✅ Correct: call createApp to return a component.
+root.render(createApp());
+```
+
+---
+
+### My server-rendered HTML gets re-created from scratch {/*my-server-rendered-html-gets-re-created-from-scratch*/}
+
+If your app is server-rendered and includes the initial HTML generated by React, you might notice that creating a root and calling `root.render` deletes all that HTML, and then re-creates all the DOM nodes from scratch. This can be slower, resets focus and scroll positions, and may lose other user input.
+
+Server-rendered apps must use [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead of `createRoot`:
+
+```js {1,4-7}
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(
+  document.getElementById('root'),
+  <App />
+);
+```
+
+Note that its API is different. In particular, usually there will be no further `root.render` call.
diff --git a/src/content/warnings/unknown-prop.md b/src/content/warnings/unknown-prop.md
index 80bcdb14296..b07078d54ee 100644
--- a/src/content/warnings/unknown-prop.md
+++ b/src/content/warnings/unknown-prop.md
@@ -1,61 +1,89 @@
----
-title: Unknown Prop Warning
----
-
-The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
-
-There are a couple of likely reasons this warning could be appearing:
-
-1. Are you using `{...props}` or `cloneElement(element, props)`? When copying props to a child component, you should ensure that you are not accidentally forwarding props that were intended only for the parent component. See common fixes for this problem below.
-
-2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
-
-3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. React will allow you to pass it without a warning if you write the attribute name lowercase.
-
-4. You are using a React component without an upper case, for example `<myButton />`. React interprets it as a DOM tag because React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags. For your own React components, use PascalCase. For example, write `<MyButton />` instead of `<myButton />`.
-
----
-
-If you get this warning because you pass props like `{...props}`, your parent component needs to "consume" any prop that is intended for the parent component and not intended for the child component. Example:
-
-**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
-
-```js
-function MyDiv(props) {
-  if (props.layout === 'horizontal') {
-    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
-    return <div {...props} style={getHorizontalStyle()} />
-  } else {
-    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
-    return <div {...props} style={getVerticalStyle()} />
-  }
-}
-```
-
-**Good:** The spread syntax can be used to pull variables off props, and put the remaining props into a variable.
-
-```js
-function MyDiv(props) {
-  const { layout, ...rest } = props
-  if (layout === 'horizontal') {
-    return <div {...rest} style={getHorizontalStyle()} />
-  } else {
-    return <div {...rest} style={getVerticalStyle()} />
-  }
-}
-```
-
-**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable.
-
-```js
-function MyDiv(props) {
-  const divProps = Object.assign({}, props);
-  delete divProps.layout;
-
-  if (props.layout === 'horizontal') {
-    return <div {...divProps} style={getHorizontalStyle()} />
-  } else {
-    return <div {...divProps} style={getVerticalStyle()} />
-  }
-}
-```
+---
+title: Unknown Prop Warning
+---
+
+The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
+
+There are a couple of likely reasons this warning could be appearing:
+
+1. Are you using `{...props}` or `cloneElement(element, props)`? When copying props to a child component, you should ensure that you are not accidentally forwarding props that were intended only for the parent component. See common fixes for this problem below.
+
+2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
+
+3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. React will allow you to pass it without a warning if you write the attribute name lowercase.
+
+4. You are using a React component without an upper case, for example `<myButton />`. React interprets it as a DOM tag because React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags. For your own React components, use PascalCase. For example, write `<MyButton />` instead of `<myButton />`.
+
+---
+
+If you get this warning because you pass props like `{...props}`, your parent component needs to "consume" any prop that is intended for the parent component and not intended for the child component. Example:
+
+**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
+
+```js
+function MyDiv(props) {
+  if (props.layout === 'horizontal') {
+    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    return <div {...props} style={getHorizontalStyle()} />
+  } else {
+    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    return <div {...props} style={getVerticalStyle()} />
+  }
+}
+```**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
+
+```js
+function MyDiv(props) {
+  if (props.layout === 'horizontal') {
+    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    return <div {...props} style={getHorizontalStyle()} />
+  } else {
+    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    return <div {...props} style={getVerticalStyle()} />
+  }
+}
+```
+
+## Valid Elements Inside Select Tags
+
+React now supports using `<script>` and `<template>` tags inside `<select>` elements, in addition to the standard `<option>`, `<optgroup>`, and text nodes. This matches modern HTML specifications and provides more flexibility when building complex select components.
+
+```jsx
+<select>
+  <option>Option 1</option>
+  <script>
+    // Script content
+  </script>
+  <template>
+    // Template content
+  </template>
+</select>
+```
+
+**Good:** The spread syntax can be used to pull variables off props, and put the remaining props into a variable.
+
+```js
+function MyDiv(props) {
+  const { layout, ...rest } = props
+  if (layout === 'horizontal') {
+    return <div {...rest} style={getHorizontalStyle()} />
+  } else {
+    return <div {...rest} style={getVerticalStyle()} />
+  }
+}
+```
+
+**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable.
+
+```js
+function MyDiv(props) {
+  const divProps = Object.assign({}, props);
+  delete divProps.layout;
+
+  if (props.layout === 'horizontal') {
+    return <div {...divProps} style={getHorizontalStyle()} />
+  } else {
+    return <div {...divProps} style={getVerticalStyle()} />
+  }
+}
+```