React

https://react.dev/reference/
Admin
React is a JavaScript library for building user interfaces with reusable components, hooks, and APIs...
Tokens:384,695
Snippets:2,673
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Complete example: CSS

Source: https://react.dev/reference/react-dom/createPortal

CSS for the example, setting button margin.

```css
button { margin: 5px; }
```

--------------------------------

### Complete example with createElement and CSS

Source: https://react.dev/reference/react/createElement

A full example using createElement to render a Greeting component, with accompanying CSS for styling. This is a complete runnable example.

```js
import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

export default function App() {
  return createElement(
    Greeting,
    { name: 'Taylor' }
  );
}

```

```css
.greeting {
  color: darkgreen;
  font-family: Georgia;
}

```

--------------------------------

### Symmetrical cleanup logic with setup

Source: https://react.dev/reference/react/useEffect

This example shows the correct pattern where cleanup logic is symmetrical to the setup logic. The cleanup stops or undoes whatever the setup did, such as disconnecting a connection that was created. This ensures the cleanup is paired with a corresponding setup, avoiding the issues described in the previous example.

```jsx
useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => {
    connection.disconnect();
  };
}, [serverUrl, roomId]);
```

--------------------------------

### CSS for the example

Source: https://react.dev/reference/react/useCallback

CSS styling for the example, including label, input, button, and dark/light theme classes.

```css
label {
  display: block; margin-top: 10px;
}

input {
  margin-left: 5px;
}

button[type="button"] {
  margin: 5px;
}

.dark {
  background-color: black;
  color: white;
}

.light {
  background-color: white;
  color: black;
}
```

--------------------------------

### Complete example: package.json

Source: https://react.dev/reference/react-dom/createPortal

The package.json for the complete example, including dependencies for Leaflet, React, and React Scripts.

```json
{
  "dependencies": {
    "leaflet": "1.9.1",
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest",
    "remarkable": "2.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
```

--------------------------------

### Complete example with App component (App.js)

Source: https://react.dev/reference/react/Component

A complete runnable example with an App component that renders a room selector and a toggle button, conditionally rendering the ChatRoom component. This is part of a Sandpack example.

```js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';

export default function App() {
  const [roomId, setRoomId] = useState('general');
  const [show, setShow] = useState(false);
  return (
    <>
      <label>
        Choose the chat room:{' '}
        <select
          value={roomId}
          onChange={e => setRoomId(e.target.value)}
        >
          <option value="general">general</option>
          <option value="travel">travel</option>
          <option value="music">music</option>
        </select>
      </label>
      <button onClick={() => setShow(!show)}>
        {show ? 'Close chat' : 'Open chat'}
      </button>
      {show && <hr />}
      {show && <ChatRoom roomId={roomId} />}
    </>
  );
}
```

--------------------------------

### Example: CSS for the interactive example

Source: https://react.dev/reference/react/Activity

CSS styles for the interactive example, including layout, navigation, and indicator styles.

```css
body { height: 275px; margin: 0; }
#root {
  display: flex;
  gap: 10px;
  height: 100%;
}
nav {
  padding: 10px;
  background: #eee;
  font-size: 14px;
  height: 100%;
}
main {
  padding: 10px;
}
p {
  margin: 0;
}
h1 {
  margin-top: 10px;
}
.indicator {
  margin-left: 4px;
  display: inline-block;
  rotate: 90deg;
}
.indicator.down {
  rotate: 180deg;
}
```

--------------------------------

### Complete example with JSX and CSS

Source: https://react.dev/reference/react/createElement

The JSX version of the complete example, rendering the Greeting component with JSX and the same CSS styling.

```js
function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

export default function App() {
  return <Greeting name="Taylor" />;
}

```

```css
.greeting {
  color: darkgreen;
  font-family: Georgia;
}

```

--------------------------------

### Full example: App.js, Albums.js, data.js

Source: https://react.dev/reference/react/use

Complete example with three files: App.js renders buttons that preload on hover, Albums.js uses use to read the cached Promise, and data.js implements fetchData with caching and fake delay. The example shows how to avoid Suspense fallback when data is preloaded.

```jsx
import { Suspense, useState, useTransition } from 'react';
import Albums from './Albums.js';
import { fetchData } from './data.js';

export default function App() {
  const [artistId, setArtistId] = useState('the-beatles');
  const [isPending, startTransition] = useTransition();

  return (
    <>
      <div>
        {['the-beatles', 'led-zeppelin', 'pink-floyd'].map(id => (
          <button
            key={id}
            onMouseEnter={() => {
              fetchData(`/${id}/albums`);
            }}
            onClick={() => {
              startTransition(() => {
                setArtistId(id);
              });
            }}
          >
            {id === 'the-beatles' ? 'The Beatles' :
             id === 'led-zeppelin' ? 'Led Zeppelin' :
             'Pink Floyd'}
          </button>
        ))}
      </div>
      <Suspense key={artistId} fallback={<Loading />}>
        <Albums artistId={artistId} />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Loading...</h2>;
}
```

```jsx
import { use } from 'react';
import { fetchData } from './data.js';

export default function Albums({ artistId }) {
  const albums = use(fetchData(`/${artistId}/albums`));
  return (
    <ul>
      {albums.map(album => (
        <li key={album.id}>
          {album.title} ({album.year})
        </li>
      ))}
    </ul>
  );
}
```

```js
// Note: the way you would do data fetching depends on
// the framework that you use together with Suspense.
// Normally, the caching logic would be inside a framework.

let cache = new Map();

export function fetchData(url) {
  if (!cache.has(url)) {
    const promise = getData(url);
    // Set status fields so React can read the value
    // synchronously if the Promise resolves before
    // `use` is called (e.g. when preloading on hover).
    promise.status = 'pending';
    promise.then(
      value => {
        promise.status = 'fulfilled';
        promise.value = value;
      },
      reason => {
        promise.status = 'rejected';
        promise.reason = reason;
      },
    );
    cache.set(url, promise);
  }
  return cache.get(url);
}

async function getData(url) {
  if (url.startsWith('/the-beatles/albums')) {
    return await getAlbums('the-beatles');
  } else if (url.startsWith('/led-zeppelin/albums')) {
    return await getAlbums('led-zeppelin');
  } else if (url.startsWith('/pink-floyd/albums')) {
    return await getAlbums('pink-floyd');
  } else {
    throw Error('Not implemented');
  }
}

async function getAlbums(artistId) {
  // Add a fake delay to make waiting noticeable.
  await new Promise(resolve => {
    setTimeout(resolve, 800);
  });

  if (artistId === 'the-beatles') {
    return [{
      id: 13,
      title: 'Let It Be',
      year: 1970
    }, {
      id: 12,
      title: 'Abbey Road',
      year: 1969
    }, {
      id: 11,
      title: 'Yellow Submarine',
      year: 1969
    }];
  } else if (artistId === 'led-zeppelin') {
    return [{
      id: 10,
      title: 'Coda',
      year: 1982
    }, {
      id: 9,
      title: 'In Through the Out Door',
      year: 1979
    }, {
      id: 8,
      title: 'Presence',
      year: 1976
    }];
  } else {
    return [{
      id: 7,
      title: 'The Wall',
      year: 1979
    }, {
      id: 6,
      title: 'Animals',
      year: 1977
    }, {
      id: 5,
      title: 'Wish You Were Here',
      year: 1975
    }];
  }
}
```

--------------------------------

### Hydrate root and update with root.render (Sandpack example)

Source: https://react.dev/reference/react-dom/client/hydrateRoot

This Sandpack example shows a complete setup for hydrating a root and updating it with root.render. The HTML file contains the server-rendered markup inside #root. The index.js file hydrates that root with an initial counter of 0 and then calls root.render every second with an incremented counter. The App.js component renders the counter and an input, and the example demonstrates that typing in the input is preserved across updates because React preserves state when the component tree matches.

```html
<!--
  All HTML content inside <div id="root">...</div> was
  generated by rendering <App /> with react-dom/server.
-->
<div id="root"><h1>Hello, world! <!-- -->0</h1><input placeholder="Type something here"/></div>
```

```jsx
import { hydrateRoot } from 'react-dom/client';
import './styles.css';
import App from './App.js';

const root = hydrateRoot(
  document.getElementById('root'),
  <App counter={0} />
);

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

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

--------------------------------

### Owner Stack vs Component Stack example

Source: https://react.dev/reference/react/captureOwnerStack

Example showing the difference between Owner Stack and Component Stack. Includes App.js, index.js, and index.html files.

```js
import {Suspense} from 'react';

function SubComponent({disabled}) {
  if (disabled) {
    throw new Error('disabled');
  }
}

export function Component({label}) {
  return (
    <fieldset>
      <legend>{label}</legend>
      <SubComponent key={label} disabled={label === 'disabled'} />
    </fieldset>
  );
}

function Navigation() {
  return null;
}

export default function App({children}) {
  return (
    <Suspense fallback="loading...">
      <main>
        <Navigation />
        {children}
      </main>
    </Suspense>
  );
}
```

```js
import {captureOwnerStack} from 'react';
import {createRoot} from 'react-dom/client';
import App, {Component} from './App.js';
import './styles.css';

createRoot(document.createElement('div'), {
  onUncaughtError: (error, errorInfo) => {
    // The stacks are logged instead of showing them in the UI directly to
    // highlight that browsers will apply sourcemaps to the logged stacks.
    // Note that sourcemapping is only applied in the real browser console not
    // in the fake one displayed on this page.
    // Press "fork" to be able to view the sourcemapped stack in a real console.
    console.log(errorInfo.componentStack);
    console.log(captureOwnerStack());
  },
}).render(
  <App>
    <Component label="disabled" />
  </App>
);
```

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>Check the console output.</p>
  </body>
</html>
```

--------------------------------

### CSS for context example

Source: https://react.dev/reference/react/Component

CSS styles for the context example, defining light and dark themes for panels and buttons.

```css
.panel-light,
.panel-dark {
  border: 1px solid black;
  border-radius: 4px;
  padding: 20px;
}
.panel-light {
  color: #222;
  background: #fff;
}

.panel-dark {
  color: #fff;
  background: rgb(23, 32, 42);
}

.button-light,
.button-dark {
  border: 1px solid #777;
  padding: 5px;
  margin-right: 10px;
  margin-top: 10px;
}

.button-dark {
  background: #222;
  color: #fff;
}

.button-light {
  background: #fff;
  color: #222;
}
```

--------------------------------

### CSS for the profile card example

Source: https://react.dev/reference/react-dom/components/img

Provides styling for the profile card, placeholders, and layout used in the example.

```css
#root {
  min-height: 390px;
}
.card {
  margin-top: 1em;
}
.card img {
  display: block;
  border-radius: 50%;
  background: #dfe3e9;
}
.card p {
  font-weight: bold;
}
.avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #dfe3e9;
}
.name-placeholder {
  width: 90px;
  border-radius: 4px;
  background: #dfe3e9;
}
hr {
  margin: 16px 0;
}
```

--------------------------------

### CSS for the CatFriends example

Source: https://react.dev/reference/react/StrictMode

Styles for the CatFriends example, including layout for the list and buttons.

```css
div {
  width: 100%;
  overflow: hidden;
}

nav {
  text-align: center;
}

button {
  margin: .25rem;
}

ul,
li {
  list-style: none;
  white-space: nowrap;
}

li {
  display: inline;
  padding: 0.5rem;
}

```

--------------------------------

### package.json for the example

Source: https://react.dev/reference/react-dom/components/img

Defines the dependencies for the Sandpack example, including React 19.3.0 and react-scripts.

```json
{
  "dependencies": {
    "react": "19.3.0",
    "react-dom": "19.3.0",
    "react-scripts": "latest"
  }
}
```

--------------------------------

### Same example rewritten with JSX

Source: https://react.dev/reference/react/createElement

The JSX version of the previous createElement example. It shows the equivalent JSX syntax for the same greeting element.

```js
function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

```

--------------------------------

### CSS styles for the example

Source: https://react.dev/reference/react/Suspense

Provides the CSS styles used by the example components, including layout, header, bio, panel, and glimmer effects.

```css
main {
  min-height: 200px;
  padding: 10px;
}

.layout {
  border: 1px solid black;
}

.header {
  background: #222;
  padding: 10px;
  text-align: center;
  color: white;
}

.bio { font-style: italic; }

.panel {
  border: 1px solid #aaa;
  border-radius: 6px;
  margin-top: 20px;
  padding: 10px;
}

.glimmer-panel {
  border: 1px dashed #aaa;
  background: linear-gradient(90deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 100%);
  border-radius: 6px;
  margin-top: 20px;
  padding: 10px;
}

.glimmer-line {
  display: block;
  width: 60%;
  height: 20px;
  margin: 10px;
  border-radius: 4px;
  background: #f0f0f0;
}
```

--------------------------------

### Sandpack createPortal example

Source: https://react.dev/reference/react-dom/createPortal

Interactive version of the createPortal example, using the same component as an export default. Demonstrates the portal in a sandboxed environment.

```js
import { createPortal } from 'react-dom';

export default function MyComponent() {
  return (
    <div style={{ border: '2px solid black' }}>
      <p>This child is placed in the parent div.</p>
      {createPortal(
        <p>This child is placed in the document body.</p>,
        document.body
      )}
    </div>
  );
}
```

--------------------------------

### Basic createPortal example

Source: https://react.dev/reference/react-dom/createPortal

Imports createPortal from 'react-dom' and renders a <p> into document.body while the rest stays in the parent div. This is the initial example with a step-highlighted JSX and DOM target.

```js
import { createPortal } from 'react-dom';

function MyComponent() {
  return (
    <div style={{ border: '2px solid black' }}>
      <p>This child is placed in the parent div.</p>
      {createPortal(
        <p>This child is placed in the document body.</p>,
        document.body
      )}
    </div>
  );
}
```

--------------------------------

### resumeAndPrerender usage example

Source: https://react.dev/reference/react-dom/static/resumeAndPrerender

Example of calling resumeAndPrerender with a React element and options, and returning the prelude stream in a Response. The postponedState is loaded from storage.

```jsx
import { resumeAndPrerender } from 'react-dom/static';
import { getPostponedState } from 'storage';

async function handler(request, response) {
  const postponedState = getPostponedState(request);
  const { prelude } = await resumeAndPrerender(<App />, postponedState, {
    bootstrapScripts: ['/main.js']
  });
  return new Response(prelude, {
    headers: { 'content-type': 'text/html' },
  });
}
```

--------------------------------

### resumeAndPrerenderToNodeStream usage example

Source: https://react.dev/reference/react-dom/static/resumeAndPrerenderToNodeStream

Example of calling resumeAndPrerenderToNodeStream with a React node and postponed state, then piping the prelude stream to a writable response.

```js
import { resumeAndPrerenderToNodeStream } from 'react-dom/static';
import { getPostponedState } from 'storage';

async function handler(request, writable) {
  const postponedState = getPostponedState(request);
  const { prelude } = await resumeAndPrerenderToNodeStream(<App />, JSON.parse(postponedState));
  prelude.pipe(writable);
}
```

--------------------------------

### Full app example with createRoot (Sandpack)

Source: https://react.dev/reference/react-dom/client/createRoot

Complete example showing the HTML entry point, the JavaScript entry file, and the App component. The app is fully built with React and uses createRoot to render into the #root div.

```html
<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <!-- This is the DOM node -->
    <div id="root"></div>
  </body>
</html>
```

```jsx
import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root = createRoot(document.getElementById('root'));
root.render(<App />);
```

```jsx
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>
  );
}
```

--------------------------------

### Preloading in an event handler

Source: https://react.dev/reference/react-dom/preload

Call `preload` in an event handler to start preloading resources before transitioning to a new page or state, getting the process started earlier than during rendering.

```js
import { preload } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preload("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}
```

--------------------------------

### Passing the updater function (Sandpack example)

Source: https://react.dev/reference/react/useState

This interactive example demonstrates the updater function approach. The +3 button works correctly because each increment uses the updater function to get the latest pending state.

```js
import { useState } from 'react';

export default function Counter() {
  const [age, setAge] = useState(42);

  function increment() {
    setAge(a => a + 1);
  }

  return (
    <>
      <h1>Your age: {age}</h1>
      <button onClick={() => {
        increment();
        increment();
        increment();
      }}>+3</button>
      <button onClick={() => {
        increment();
      }}>+1</button>
    </>
  );
}
```

```css
button { display: block; margin: 10px; font-size: 20px; }
h1 { display: block; margin: 10px; }
```

--------------------------------

### componentWillUnmount cleanup example

Source: https://react.dev/reference/react/Component

Defines a ChatRoom class component that sets up a connection in componentDidMount, updates it in componentDidUpdate, and cleans it up in componentWillUnmount. The componentWillUnmount method calls destroyConnection to mirror the setup. This example is shown with the componentWillUnmount lines highlighted.

```jsx
class ChatRoom extends Component {
  state = {
    serverUrl: 'https://localhost:1234'
  };

  componentDidMount() {
    this.setupConnection();
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      this.props.roomId !== prevProps.roomId ||
      this.state.serverUrl !== prevState.serverUrl
    ) {
      this.destroyConnection();
      this.setupConnection();
    }
  }

  componentWillUnmount() {
    this.destroyConnection();
  }

  // ...
}
```

--------------------------------

### Avoid: Cleanup logic without corresponding setup logic

Source: https://react.dev/reference/react/useEffect

This example shows a common mistake where cleanup logic is written without a corresponding setup. The cleanup function runs not only during unmount but also before every re-render with changed dependencies, and in development, React runs setup+cleanup one extra time immediately after mount. This pattern is a code smell because the cleanup is not symmetrical to any setup.

```jsx
useEffect(() => {
  // 🔴 Avoid: Cleanup logic without corresponding setup logic
  return () => {
    doSomething();
  };
}, []);
```

--------------------------------

### preinitModule in an event handler

Source: https://react.dev/reference/react-dom/preinitModule

Usage example: call preinitModule in an event handler before transitioning to a page or state that needs the module. This starts the download/execution earlier than calling it during rendering.

```js
import { preinitModule } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preinitModule("https://example.com/module.js", {as: "script"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}
```

--------------------------------

### useEffect(setup, dependencies?)

Source: https://react.dev/reference/react/useEffect

Documentation for the useEffect React Hook, including its parameters, return value, and caveats.

```APIDOC
## useEffect(setup, dependencies?)

### Description
`useEffect` is a React Hook that lets you synchronize a component with an external system. It runs the setup function after the component commits, and optionally runs a cleanup function before the next setup or when the component unmounts.

### Parameters
- **setup** (function) - Required - The function with your Effect's logic. May optionally return a cleanup function.
- **dependencies** (array) - Optional - List of reactive values referenced inside the setup code. Must be written inline and have a constant number of items. If omitted, the Effect re-runs after every commit.

### Returns
`useEffect` returns `undefined`.

### Caveats
- `useEffect` is a Hook, so it can only be called at the top level of your component or your own Hooks.
- If you're not trying to synchronize with an external system, you probably don't need an Effect.
- In Strict Mode, React runs an extra development-only setup+cleanup cycle before the first real setup.
- Dependencies that are objects or functions defined inside the component may cause the Effect to re-run more often than needed.
- Effects only run on the client, not during server rendering.
```

--------------------------------

### App component rendering both modal examples

Source: https://react.dev/reference/react-dom/createPortal

The main App component renders two containers with clipping styles, one containing the NoPortalExample and the other the PortalExample. This setup demonstrates the difference in behavior.

```jsx
import NoPortalExample from './NoPortalExample';
import PortalExample from './PortalExample';

export default function App() {
  return (
    <>
      <div className="clipping-container">
        <NoPortalExample  />
      </div>
      <div className="clipping-container">
        <PortalExample />
      </div>
    </>
  );
}
```

--------------------------------

### Sandpack example: TabContainer with action props

Source: https://react.dev/reference/react/useTransition

Complete Sandpack example showing how a parent component passes `action` props to `TabButton` components. The parent updates state inside the action, which gets marked as a Transition, so clicking 'Posts' and then 'Contact' does not block user interactions. Includes the `TabButton` component with pending state, the tab content components, and the CSS for styling.

```jsx
import { useState } from 'react';
import TabButton from './TabButton.js';
import AboutTab from './AboutTab.js';
import PostsTab from './PostsTab.js';
import ContactTab from './ContactTab.js';

export default function TabContainer() {
  const [tab, setTab] = useState('about');
  return (
    <>
      <TabButton
        isActive={tab === 'about'}
        action={() => setTab('about')}
      >
        About
      </TabButton>
      <TabButton
        isActive={tab === 'posts'}
        action={() => setTab('posts')}
      >
        Posts (slow)
      </TabButton>
      <TabButton
        isActive={tab === 'contact'}
        action={() => setTab('contact')}
      >
        Contact
      </TabButton>
      <hr />
      {tab === 'about' && <AboutTab />}
      {tab === 'posts' && <PostsTab />}
      {tab === 'contact' && <ContactTab />}
    </>
  );
}
```

```jsx
import { useTransition } from 'react';

export default function TabButton({ action, children, isActive }) {
  const [isPending, startTransition] = useTransition();
  if (isActive) {
    return <b>{children}</b>
  }
  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  return (
    <button onClick={async () => {
      startTransition(async () => {
        // await the action that's passed in.
        // This allows it to be either sync or async.
        await action();
      });
    }}>
      {children}
    </button>
  );
}
```

```jsx
export default function AboutTab() {
  return (
    <p>Welcome to my profile!</p>
  );
}
```

```jsx
import { memo } from 'react';

const PostsTab = memo(function PostsTab() {
  // Log once. The actual slowdown is inside SlowPost.
  console.log('[ARTIFICIALLY SLOW] Rendering 500 <SlowPost />');

  let items = [];
  for (let i = 0; i < 500; i++) {
    items.push(<SlowPost key={i} index={i} />);
  }
  return (
    <ul className="items">
      {items}
    </ul>
  );
});

function SlowPost({ index }) {
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {
    // Do nothing for 1 ms per item to emulate extremely slow code
  }

  return (
    <li className="item">
      Post #{index + 1}
    </li>
  );
}

export default PostsTab;
```

```jsx
export default function ContactTab() {
  return (
    <>
      <p>
        You can find me online here:
      </p>
      <ul>
        <li>admin@mysite.com</li>
        <li>+123456789</li>
      </ul>
    </>
  );
}
```

```css
button { margin-right: 10px }
b { display: inline-block; margin-right: 10px; }
.pending { color: #777; }
.items {
  max-height: 300px;
  overflow: auto;
}
```

--------------------------------

### Gradual adoption: optimizing leaf components

Source: https://react.dev/reference/react-compiler/directives/use-memo

When gradually adopting React Compiler, start with `annotation` mode and selectively optimize stable components. This example shows optimizing a leaf component and then a parent component as you verify behavior.

```js
// Start by optimizing leaf components
function Button({ onClick, children }) {
  "use memo";
  // ...
}

// Gradually move up the tree as you verify behavior
function ButtonGroup({ buttons }) {
  "use memo";
  // ...
}
```

--------------------------------

### Full example with use and context

Source: https://react.dev/reference/react/use

A complete Sandpack example showing `use` reading context in a component tree, including conditional calls inside a Button component.

```jsx
import { createContext, use } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext value="dark">
      <Form />
    </ThemeContext>
  )
}

function Form() {
  return (
    <Panel title="Welcome">
      <Button show={true}>Sign up</Button>
      <Button show={false}>Log in</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = use(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ show, children }) {
  if (show) {
    const theme = use(ThemeContext);
    const className = 'button-' + theme;
    return (
      <button className={className}>
        {children}
      </button>
    );
  }
  return false
}
```

--------------------------------

### Complete Sandpack example: render prop pattern

Source: https://react.dev/reference/react/cloneElement

A full runnable example with App, List, Row, data, and CSS files, demonstrating the render prop pattern as an alternative to cloneElement.

```js
import List from './List.js';
import Row from './Row.js';
import { products } from './data.js';

export default function App() {
  return (
    <List
      items={products}
      renderItem={(product, isHighlighted) =>
        <Row
          key={product.id}
          title={product.title}
          isHighlighted={isHighlighted}
        />
      }
    />
  );
}
```

```js
import { useState } from 'react';

export default function List({ items, renderItem }) {
  const [selectedIndex, setSelectedIndex] = useState(0);
  return (
    <div className="List">
      {items.map((item, index) => {
        const isHighlighted = index === selectedIndex;
        return renderItem(item, isHighlighted);
      })}
      <hr />
      <button onClick={() => {
        setSelectedIndex(i =>
          (i + 1) % items.length
        );
      }}>
        Next
      </button>
    </div>
  );
}
```

```js
export default function Row({ title, isHighlighted }) {
  return (
    <div className={[
      'Row',
      isHighlighted ? 'RowHighlighted' : ''
    ].join(' ')}>
      {title}
    </div>
  );
}
```

```js
export const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];
```

```css
.List {
  display: flex;
  flex-direction: column;
  border: 2px solid grey;
  padding: 5px;
}

.Row {
  border: 2px dashed black;
  padding: 5px;
  margin: 5px;
}

.RowHighlighted {
  background: #ffa;
}

button {
  height: 40px;
  font-size: 20px;
}
```

--------------------------------

### Pitfall: cacheSignal outside rendering

Source: https://react.dev/reference/react/cacheSignal

This example shows a pitfall: calling `cacheSignal()` outside of rendering (e.g., at module scope) will not abort the request when the component finishes rendering. The signal is captured before rendering starts, so it won't be aborted.

```js
import {cacheSignal} from 'react';
// 🚩 Pitfall: The request will not actually be aborted if the rendering of `Component` is finished.
const response = fetch(url, { signal: cacheSignal() });
async function Component() {
  await response;
}
```

--------------------------------

### Preload data on hover with fetchData and use

Source: https://react.dev/reference/react/use

Call fetchData in onMouseEnter to start fetching albums before click. The Promise is cached, so if it resolves before use reads it, React renders without Suspense fallback. This example shows the button with onMouseEnter and onClick handlers.

```jsx
<button
  onMouseEnter={() => fetchData(`/${id}/albums`)}
  onClick={() => {
    startTransition(() => {
      setArtistId(id);
    });
  }}
>
```

--------------------------------

### Checkout example with useActionState and startTransition

Source: https://react.dev/reference/react/useActionState

A complete interactive example showing how to use useActionState with startTransition to handle asynchronous cart updates. Includes the main component, a total display component, and an API module with simulated delays.

```jsx
import { useActionState, startTransition } from 'react';
import { addToCart } from './api';
import Total from './Total';

export default function Checkout() {
  const [count, dispatchAction, isPending] = useActionState(async (prevCount) => {
    return await addToCart(prevCount)
  }, 0);

  function handleClick() {
    startTransition(() => {
      dispatchAction();
    });
  }

  return (
    <div className="checkout">
      <h2>Checkout</h2>
      <div className="row">
        <span>Eras Tour Tickets</span>
        <span>Qty: {count}</span>
      </div>
      <div className="row">
        <button onClick={handleClick}>Add Ticket{isPending ? ' 🌀' : '  '}</button>
      </div>
      <hr />
      <Total quantity={count} />
    </div>
  );
}
```

```jsx
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
});

export default function Total({quantity}) {
  return (
    <div className="row total">
      <span>Total</span>
      <span>{formatter.format(quantity * 9999)}</span>
    </div>
  );
}
```

```js
export async function addToCart(count) {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return count + 1;
}

export async function removeFromCart(count) {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return Math.max(0, count - 1);
}
```

```css
.checkout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: system-ui;
}

.checkout h2 {
  margin: 0 0 8px 0;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.row button {
  margin-left: auto;
  min-width: 150px;
}

.total {
  font-weight: bold;
}

hr {
  width: 100%;
  border: none;
  border-top: 1px solid #ccc;
  margin: 4px 0;
}

button {
  padding: 8px 16px;
  cursor: pointer;
}
```

--------------------------------

### CSS: Styles for dark/light theme and labels

Source: https://react.dev/reference/react/useMemo

CSS for the example, including label display and dark/light theme classes.

```css
label {
  display: block;
  margin-top: 10px;
}

.dark {
  background-color: black;
  color: white;
}

.light {
  background-color: white;
  color: black;
}
```

--------------------------------

### Complete example with useList, Row, data, and styles

Source: https://react.dev/reference/react/cloneElement

A full runnable example showing the custom Hook, a Row component, product data, and CSS styles. The App component uses the Hook to manage selection and render the list with a Next button.

```js
import Row from './Row.js';
import useList from './useList.js';
import { products } from './data.js';

export default function App() {
  const [selected, onNext] = useList(products);
  return (
    <div className="List">
      {products.map(product =>
        <Row
          key={product.id}
          title={product.title}
          isHighlighted={selected === product}
        />
      )}
      <hr />
      <button onClick={onNext}>
        Next
      </button>
    </div>
  );
}
```

```js
import { useState } from 'react';

export default function useList(items) {
  const [selectedIndex, setSelectedIndex] = useState(0);

  function onNext() {
    setSelectedIndex(i =>
      (i + 1) % items.length
    );
  }

  const selected = items[selectedIndex];
  return [selected, onNext];
}
```

```js
export default function Row({ title, isHighlighted }) {
  return (
    <div className={[
      'Row',
      isHighlighted ? 'RowHighlighted' : ''
    ].join(' ')}>
      {title}
    </div>
  );
}
```

```js
export const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];
```

```css
.List {
  display: flex;
  flex-direction: column;
  border: 2px solid grey;
  padding: 5px;
}

.Row {
  border: 2px dashed black;
  padding: 5px;
  margin: 5px;
}

.RowHighlighted {
  background: #ffa;
}

button {
  height: 40px;
  font-size: 20px;
}
```

--------------------------------

### use(resource) basic syntax

Source: https://react.dev/reference/react/use

Shows the basic syntax for calling `use` with a resource (Promise or context).

```js
const value = use(resource);
```

--------------------------------

### React entry point with createRoot

Source: https://react.dev/reference/react-dom/createPortal

Sets up the React root and renders the App component inside StrictMode. This is the standard entry point for the React part of the hybrid app.

```js
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
```

--------------------------------

### Sandpack example: CSS for buttons

Source: https://react.dev/reference/react/useState

CSS styling for the button element in the Sandpack example.

```css
button { margin-bottom: 10px; }
```

--------------------------------

### Valid configuration example

Source: https://react.dev/reference/eslint-plugin-react-hooks/lints/config

Shows a correct compiler configuration using valid option names and values: compilationMode: 'infer' and panicThreshold: 'critical_errors'.

```javascript
// ✅ Valid compiler configuration
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'infer',
      panicThreshold: 'critical_errors'
    }]
  ]
};
```

--------------------------------

### useLayoutEffect(setup, dependencies?)

Source: https://react.dev/reference/react/useLayoutEffect

Call useLayoutEffect to perform layout measurements before the browser repaints the screen. It accepts a setup function and an optional dependencies array, and returns undefined.

```APIDOC
## useLayoutEffect(setup, dependencies?)

### Description
Call `useLayoutEffect` to perform the layout measurements before the browser repaints the screen. It is a version of `useEffect` that fires synchronously after all DOM mutations and before the browser paints.

### Method
Hook

### Signature
```js
useLayoutEffect(setup, dependencies?)
```

### Parameters
- **setup** (function) - Required - The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. After your component commits to the DOM and before the browser repaints the screen, React will run your setup function. After every commit with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function.
- **dependencies** (array) - Optional - The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is configured for React, it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the `Object.is` comparison. If you omit this argument, your Effect will re-run after every commit of the component.

### Returns
`useLayoutEffect` returns `undefined`.

### Caveats
- `useLayoutEffect` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a component and move the Effect there.
- When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
- If some of your dependencies are objects or functions defined inside the component, there is a risk that they will **cause the Effect to re-run more often than needed.** To fix this, remove unnecessary object and function dependencies. You can also extract state updates and non-reactive logic outside of your Effect.
- Effects **only run on the client.** They don't run during server rendering.
- The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this makes your app slow. When possible, prefer `useEffect`.
- If you trigger a state update inside `useLayoutEffect`, React will execute all remaining Effects immediately including `useEffect`.

### Example
```js
import { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
  }, []);
  // ...
}
```
```

--------------------------------

### Full Sandpack example with controlled inputs

Source: https://react.dev/reference/react-dom/components/input

Complete example with controlled inputs for first name and age, including a button to add 10 years, and CSS for styling.

```jsx
import { useState } from 'react';

export default function Form() {
  const [firstName, setFirstName] = useState('');
  const [age, setAge] = useState('20');
  const ageAsNumber = Number(age);
  return (
    <>
      <label>
        First name:
        <input
          value={firstName}
          onChange={e => setFirstName(e.target.value)}
        />
      </label>
      <label>
        Age:
        <input
          value={age}
          onChange={e => setAge(e.target.value)}
          type="number"
        />
        <button onClick={() => setAge(ageAsNumber + 10)}>
          Add 10 years
        </button>
      </label>
      {firstName !== '' &&
        <p>Your name is {firstName}.</p>
      }
      {ageAsNumber > 0 &&
        <p>Your age is {ageAsNumber}.</p>
      }
    </>
  );
}
```

```css
label { display: block; }
input { margin: 5px; }
p { font-weight: bold; }
```

--------------------------------

### Children.toArray example

Source: https://react.dev/reference/react/Children

Converts children to a flat array, then reverses it. The example shows the beginning of a ReversedList component.

```jsx
import { Children } from 'react';

export default function ReversedList({ children }) {
  const result = Children.toArray(children);
  result.reverse();
  // ...
```

--------------------------------

### preinit basic usage

Source: https://react.dev/reference/react-dom/preinit

Calls `preinit` with a script URL and `as: "script"` to eagerly fetch and evaluate the script.

```js
preinit("https://example.com/script.js", {as: "script"});
```

--------------------------------

### Install react-compiler-runtime

Source: https://react.dev/reference/react-compiler/compiling-libraries

Install the react-compiler-runtime package as a direct dependency for backwards compatibility with React versions below 19.

```bash
npm install react-compiler-runtime@latest
```

--------------------------------

### Install babel-plugin-react-compiler

Source: https://react.dev/reference/react-compiler/compiling-libraries

Install the React Compiler Babel plugin as a dev dependency for your library build process.

```bash
npm install -D babel-plugin-react-compiler@latest
```
Tokens:
Raw