React

https://github.com/reactjs/react.dev
Admin
React.dev is the official documentation website for React, a JavaScript library for building user...
Tokens:703,828
Snippets:4,342
Trust Score:10
Update:1 hour ago
Show doc for...
Tokens:
Raw
### Complete example of re-fetching data with use and Suspense

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/use.md

Shows an interactive setup where App initiates data refetches inside startTransition and Albums suspends on the returned Promise using the use API. Includes caching and cache invalidation helpers.

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

export default function App() {
  const [albumsPromise, setAlbumsPromise] = useState(
    () => fetchData('/the-beatles/albums')
  );
  const [isPending, startTransition] = useTransition();

  function handleRefresh() {
    startTransition(() => {
      setAlbumsPromise(refetchData('/the-beatles/albums'));
    });
  }

  return (
    <>
      <button
        onClick={handleRefresh}
        disabled={isPending}
      >
        {isPending ? 'Refreshing...' : 'Refresh'}
      </button>
      <div style={{ opacity: isPending ? 0.6 : 1 }}>
        <Suspense fallback={<Loading />}>
          <Albums albumsPromise={albumsPromise} />
        </Suspense>
      </div>
    </>
  );
}

function Albums({ albumsPromise }) {
  const albums = use(albumsPromise);
  return (
    <ul>
      {albums.map(album => (
        <li key={album.id}>
          {album.title} ({album.year})
        </li>
      ))}
    </ul>
  );
}

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

```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)) {
    cache.set(url, getData(url));
  }
  return cache.get(url);
}

export function refetchData(url) {
  cache.delete(url);
  return fetchData(url);
}

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

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

  return [{
    id: 13,
    title: 'Let It Be',
    year: 1970
  }, {
    id: 12,
    title: 'Abbey Road',
    year: 1969
  }, {
    id: 11,
    title: 'Yellow Submarine',
    year: 1969
  }, {
    id: 10,
    title: 'The Beatles',
    year: 1968
  }, {
    id: 9,
    title: 'Magical Mystery Tour',
    year: 1967
  }];
}
```

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

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

### Focus search field challenge setup

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/manipulating-the-dom-with-refs.md

Initial setup consisting of separate App, SearchButton, and SearchInput components before connecting them via refs and event handlers.

```javascript
import SearchButton from './SearchButton.js';
import SearchInput from './SearchInput.js';

export default function Page() {
  return (
    <>
      <nav>
        <SearchButton />
      </nav>
      <SearchInput />
    </>
  );
}
```

```javascript
export default function SearchButton() {
  return (
    <button>
      Search
    </button>
  );
}
```

```javascript
export default function SearchInput() {
  return (
    <input
      placeholder="Looking for something?"
    />
  );
}
```

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

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

### Complete Counter example with useReducer

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useReducer.md

An interactive example demonstrating how a counter component uses useReducer to handle state updates and render the updated UI.

```javascript
import { useReducer } from 'react';

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    };
  }
  throw Error('Unknown action.');
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });

  return (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
      }}>
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );
}
```

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

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

### Complete Leaflet map widget portal integration example

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/createPortal.md

Full multi-file example showing how to mount a Leaflet map widget and render a React component inside its popup using createPortal.

```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"
  }
}
```

```javascript
import { useRef, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { createMapWidget, addPopupToMapWidget } from './map-widget.js';

export default function Map() {
  const containerRef = useRef(null);
  const mapRef = useRef(null);
  const [popupContainer, setPopupContainer] = useState(null);

  useEffect(() => {
    if (mapRef.current === null) {
      const map = createMapWidget(containerRef.current);
      mapRef.current = map;
      const popupDiv = addPopupToMapWidget(map);
      setPopupContainer(popupDiv);
    }
  }, []);

  return (
    <div style={{ width: 250, height: 250 }} ref={containerRef}>
      {popupContainer !== null && createPortal(
        <p>Hello from React!</p>,
        popupContainer
      )}
    </div>
  );
}
```

```javascript
import 'leaflet/dist/leaflet.css';
import * as L from 'leaflet';

export function createMapWidget(containerDomNode) {
  const map = L.map(containerDomNode);
  map.setView([0, 0], 0);
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
  }).addTo(map);
  return map;
}

export function addPopupToMapWidget(map) {
  const popupDiv = document.createElement('div');
  L.popup()
    .setLatLng([0, 0])
    .setContent(popupDiv)
    .openOn(map);
  return popupDiv;
}
```

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

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

### Video player challenge initial setup

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/manipulating-the-dom-with-refs.md

Initial state-only implementation for toggling a video player before adding a DOM ref.

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

export default function VideoPlayer() {
  const [isPlaying, setIsPlaying] = useState(false);

  function handleClick() {
    const nextIsPlaying = !isPlaying;
    setIsPlaying(nextIsPlaying);
  }

  return (
    <>
      <button onClick={handleClick}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
      <video width="250">
        <source
          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
          type="video/mp4"
        />
      </video>
    </>
  )
}
```

```css
button { display: block; margin-bottom: 20px; }
```

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

### Install React and React DOM

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/add-react-to-an-existing-project.md

Installs the react and react-dom packages into your project using npm to prepare for rendering React components.

```shell
npm install react react-dom
```

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

### Install React Compiler using npm

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/react-compiler/installation.md

Installs the React Compiler Babel plugin as a developer dependency using npm.

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

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

### Full client-side application setup

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/client/createRoot.md

Configures an HTML target container, mounts the application at startup with createRoot, and defines interactive React components.

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

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

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

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

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

### Install React Compiler using Yarn

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/react-compiler/installation.md

Installs the React Compiler Babel plugin as a developer dependency using Yarn.

```bash
yarn add -D babel-plugin-react-compiler@latest
```

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

### Install React Compiler using pnpm

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/react-compiler/installation.md

Installs the React Compiler Babel plugin as a developer dependency using pnpm.

```bash
pnpm install -D babel-plugin-react-compiler@latest
```

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

### Defining setup and cleanup logic in useEffect

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/removing-effect-dependencies.md

Specify how to start and stop the Effect by connecting to a chat service and returning a disconnect cleanup function.

```javascript
const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  	// ...
}
```

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

### Set up Messenger component with useReducer

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/extracting-state-logic-into-a-reducer.md

Initial setup of the Messenger component before implementing input reset logic on send.

```javascript
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
import { initialState, messengerReducer } from './messengerReducer';

export default function Messenger() {
  const [state, dispatch] = useReducer(messengerReducer, initialState);
  const message = state.message;
  const contact = contacts.find((c) => c.id === state.selectedId);
  return (
    <div>
      <ContactList
        contacts={contacts}
        selectedId={state.selectedId}
        dispatch={dispatch}
      />
      <Chat
        key={contact.id}
        message={message}
        contact={contact}
        dispatch={dispatch}
      />
    </div>
  );
}

const contacts = [
  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
  {id: 1, name: 'Alice', email: 'alice@mail.com'},
  {id: 2, name: 'Bob', email: 'bob@mail.com'},
];
```

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

### Focus search field challenge initial setup

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/manipulating-the-dom-with-refs.md

Initial markup for a search button and input field before wiring up focus with a ref.

```jsx
export default function Page() {
  return (
    <>
      <nav>
        <button>Search</button>
      </nav>
      <input
        placeholder="Looking for something?"
      />
    </>
  );
}
```

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

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

### Install react-compiler-runtime

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-compiler/compiling-libraries.md

Installs react-compiler-runtime as a dependency to support React versions prior to version 19.

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

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

### Starter code for extracting useInterval

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/reusing-logic-with-custom-hooks.md

Initial setup containing the Counter component, the monolithic `useCounter` implementation, and an empty `useInterval.js` file.

```javascript
import { useCounter } from './useCounter.js';

export default function Counter() {
  const count = useCounter(1000);
  return <h1>Seconds passed: {count}</h1>;
}
```

```javascript
import { useState, useEffect } from 'react';

export function useCounter(delay) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, delay);
    return () => clearInterval(id);
  }, [delay]);
  return count;
}
```

```javascript
// Write your Hook here!
```

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

### Install React type definitions with npm

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/typescript.md

Installs the latest version of type definitions for React and ReactDOM as development dependencies in an existing project.

```bash
npm install --save-dev @types/react @types/react-dom
```

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

### Starter code for PackingList and Item components

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/conditional-rendering.md

Initial challenge setup where Item components receive name and numerical importance props without conditional rendering.

```jsx
function Item({ name, importance }) {
  return (
    <li className="item">
      {name}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item
          importance={9}
          name="Space suit"
        />
        <Item
          importance={0}
          name="Helmet with a golden leaf"
        />
        <Item
          importance={6}
          name="Photo of Tam"
        />
      </ul>
    </section>
  );
}
```

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

### Interactive example of reading a Promise with use inside Suspense

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/use.md

A complete example showing how to trigger and pass a Promise to a component that resolves it with the `use` API inside a Suspense boundary.

```javascript
"use client";

import { use, Suspense } from "react";

function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

export function MessageContainer({ messagePromise }) {
  return (
    <Suspense fallback={<p>⌛Downloading message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}
```

```javascript
import { useState } from "react";
import { MessageContainer } from "./message.js";

function fetchMessage() {
  return new Promise((resolve) => setTimeout(resolve, 1000, "⚛️"));
}

export default function App() {
  const [messagePromise, setMessagePromise] = useState(null);
  const [show, setShow] = useState(false);
  function download() {
    setMessagePromise(fetchMessage());
    setShow(true);
  }

  if (show) {
    return <MessageContainer messagePromise={messagePromise} />;
  } else {
    return <button onClick={download}>Download message</button>;
  }
}
```

```javascript
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';

// TODO: update this example to use
// the Codesandbox Server Component
// demo environment once it is created
import App from './App';

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

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

### Install babel-plugin-react-compiler

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-compiler/compiling-libraries.md

Adds React Compiler as a development dependency to the library build process.

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

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

### Set up Tic-Tac-Toe game board with move history (App.js and styles.css)

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/tutorial-tic-tac-toe.md

Initial setup for the Tic-Tac-Toe application with board components, winner calculation, and history state representation.

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

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

function Board({ xIsNext, squares, onPlay }) {
  function handleClick(i) {
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    const nextSquares = squares.slice();
    if (xIsNext) {
      nextSquares[i] = 'X';
    } else {
      nextSquares[i] = 'O';
    }
    onPlay(nextSquares);
  }

  const winner = calculateWinner(squares);
  let status;
  if (winner) {
    status = 'Winner: ' + winner;
  } else {
    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
  }

  return (
    <>
      <div className="status">{status}</div>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
}

export default function Game() {
  const [xIsNext, setXIsNext] = useState(true);
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const currentSquares = history[history.length - 1];

  function handlePlay(nextSquares) {
    setHistory([...history, nextSquares]);
    setXIsNext(!xIsNext);
  }

  function jumpTo(nextMove) {
    // TODO
  }

  const moves = history.map((squares, move) => {
    let description;
    if (move > 0) {
      description = 'Go to move #' + move;
    } else {
      description = 'Go to game start';
    }
    return (
      <li key={move}>
        <button onClick={() => jumpTo(move)}>{description}</button>
      </li>
    );
  });

  return (
    <div className="game">
      <div className="game-board">
        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
      </div>
      <div className="game-info">
        <ol>{moves}</ol>
      </div>
    </div>
  );
}

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

```

```css
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 20px;
  padding: 0;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.board-row:after {
  clear: both;
  content: '';
  display: table;
}

.status {
  margin-bottom: 10px;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

```

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

### Preconnecting in an event handler

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/preconnect.md

Call preconnect inside an event handler before initiating transitions that require resources from another host, starting connection setup as early as possible.

```javascript
import { preconnect } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preconnect('http://example.com');
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}
```

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

### Install eslint-plugin-react-hooks

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/react-compiler/installation.md

Install the ESLint plugin to identify components or hooks that violate the Rules of React and cannot be optimized by the compiler.

```bash
npm install -D eslint-plugin-react-hooks@latest
```

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

### Interactive example of deferred list re-rendering

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useDeferredValue.md

Complete example showing an artificially slowed list component whose re-rendering is deferred so that typing in the input remains smooth and snappy.

```js
import { useState, useDeferredValue } from 'react';
import SlowList from './SlowList.js';

export default function App() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <SlowList text={deferredText} />
    </>
  );
}
```

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

const SlowList = memo(function SlowList({ text }) {
  // Log once. The actual slowdown is inside SlowItem.
  console.log('[ARTIFICIALLY SLOW] Rendering 250 <SlowItem />');

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

function SlowItem({ text }) {
  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">
      Text: {text}
    </li>
  )
}

export default SlowList;
```

```css
.items {
  padding: 0;
  max-height: 300px;
  overflow: auto;
}

.item {
  list-style: none;
  display: block;
  height: 40px;
  padding: 5px;
  margin-top: 10px;
  border-radius: 4px;
  border: 1px solid #aaa;
}
```

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

### Passing the initial state directly (inefficient example)

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useState.md

Demonstrates initializing state by invoking createInitialTodos() directly, causing expensive initialization logic to execute on every re-render.

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

function createInitialTodos() {
  const initialTodos = [];
  for (let i = 0; i < 50; i++) {
    initialTodos.push({
      id: i,
      text: 'Item ' + (i + 1)
    });
  }
  return initialTodos;
}

export default function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos());
  const [text, setText] = useState('');

  return (
    <>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <button onClick={() => {
        setText('');
        setTodos([{
          id: todos.length,
          text: text
        }, ...todos]);
      }}>Add</button>
      <ul>
        {todos.map(item => (
          <li key={item.id}>
            {item.text}
          </li>
        ))}
      </ul>
    </>
  );
}
```

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

### Calling preinit from react-dom

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/preinit.md

Provide a hint to the browser to start downloading and executing a resource during component execution.

```javascript
import { preinit } from 'react-dom';

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

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

### Implement symmetrical setup and cleanup logic in useEffect

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useEffect.md

Structure cleanup logic so that it is symmetrical to setup logic by stopping or undoing whatever setup performed. In this example, the cleanup disconnects the connection established during setup.

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

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

### Install react-devtools globally with Yarn or npm

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/react-developer-tools.md

Installs the standalone React Developer Tools package globally for browsers without extension support, such as Safari.

```bash
# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools
```

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

### Set up HTML markup and styling for gallery UI

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/state-a-components-memory.md

Defines the DOM structure and baseline styling for the gallery component example to illustrate manual DOM manipulation.

```html
<button id="nextButton">
  Next
</button>
<h3 id="header"></h3>
<button id="moreButton"></button>
<p id="description"></p>
<img id="image">

<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; margin: 20px; padding: 0; }
button { display: block; margin-bottom: 10px; }
</style>
```

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

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

### State queue sandbox challenge files

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/queueing-a-series-of-state-updates.md

Initial setup for the state queue challenge containing the starter getFinalState function in src/processQueue.js and test cases in src/App.js.

```js
export function getFinalState(baseState, queue) {
  let finalState = baseState;

  // TODO: do something with the queue...

  return finalState;
}
```

```js
import { getFinalState } from './processQueue.js';

function increment(n) {
  return n + 1;
}
increment.toString = () => 'n => n+1';

export default function App() {
  return (
    <>
      <TestCase
        baseState={0}
        queue={[1, 1, 1]}
        expected={1}
      />
      <hr />
      <TestCase
        baseState={0}
        queue={[
          increment,
          increment,
          increment
        ]}
        expected={3}
      />
      <hr />
      <TestCase
        baseState={0}
        queue={[
          5,
          increment,
        ]}
        expected={6}
      />
      <hr />
      <TestCase
        baseState={0}
        queue={[
          5,
          increment,
          42,
        ]}
        expected={42}
      />
    </>
  );
}

function TestCase({
  baseState,
  queue,
  expected
}) {
  const actual = getFinalState(baseState, queue);
  return (
    <>
      <p>Base state: <b>{baseState}</b></p>
      <p>Queue: <b>[{queue.join(', ')}]</b></p>
      <p>Expected result: <b>{expected}</b></p>
      <p style={{
        color: actual === expected ?
          'green' :
          'red'
      }}>
        Your result: <b>{actual}</b>
        {' '}
        ({actual === expected ?
          'correct' :
          'wrong'
        })
      </p>
    </>
  );
}
```

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

### Interactive render prop example with List, Row, and data

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/cloneElement.md

Complete implementation demonstrating the render prop alternative across App.js, List.js, Row.js, data.js, and CSS styling.

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

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

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

```javascript
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;
}
```

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

### Complete Board state management setup

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/tutorial-tic-tac-toe.md

Integrate state management into Board to track square values and pass click handlers down to Square components.

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

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));

  function handleClick(i) {
    const nextSquares = squares.slice();
    nextSquares[i] = 'X';
    setSquares(nextSquares);
  }

  return (
    <>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
}
```

```css
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 20px;
  padding: 0;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.board-row:after {
  clear: both;
  content: '';
  display: table;
}

.status {
  margin-bottom: 10px;
}
.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}
```

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

### Render a Greeting component with props

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/installation.md

Use this basic component pattern to experiment with React in an interactive sandbox without installing any tools locally.

```js
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

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

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

### Configure and install runtime for React 17 or 18

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-compiler/target.md

Targeting React 17 or 18 requires installing the `react-compiler-runtime` package and setting the corresponding target string. The compiler outputs imports using the standalone polyfill package.

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

```javascript
// For React 18
{
  target: '18'
}

// For React 17
{
  target: '17'
}
```

```javascript
// Compiled output uses the polyfill
import { c as _c } from 'react-compiler-runtime';
```

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

### Complete example of rendering a list of items using keyed Fragments

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/Fragment.md

Maps over an array of post objects and assigns a key prop to each explicit Fragment container without creating unnecessary wrapper elements in the DOM.

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

const posts = [
  { id: 1, title: 'An update', body: "It's been a while since I posted..." },
  { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
];

export default function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}
```

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

### Install Parcel build tool

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/build-a-react-app-from-scratch.md

Installs Parcel as a development dependency. Parcel includes out-of-the-box support for fast refresh, JSX, TypeScript, Flow, and styling.

```bash
npm install --save-dev parcel
```

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

### Solution: useInterval implementation and integration

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/reusing-logic-with-custom-hooks.md

Implements `useInterval` with `useEffect` to manage interval setup and cleanup, and updates `useCounter` to use it.

```javascript
import { useCounter } from './useCounter.js';

export default function Counter() {
  const count = useCounter(1000);
  return <h1>Seconds passed: {count}</h1>;
}
```

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

export function useCounter(delay) {
  const [count, setCount] = useState(0);
  useInterval(() => {
    setCount(c => c + 1);
  }, delay);
  return count;
}
```

```javascript
import { useEffect } from 'react';

export function useInterval(onTick, delay) {
  useEffect(() => {
    const id = setInterval(onTick, delay);
    return () => clearInterval(id);
  }, [onTick, delay]);
}
```

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

### Migrating a simple component to a function component

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/Component.md

Complete example of rendering the Greeting function component with destructured props inside App.

```js
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default function App() {
  return (
    <>
      <Greeting name="Sara" />
      <Greeting name="Cahal" />
      <Greeting name="Edite" />
    </>
  );
}
```

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

### Example Component Stack trace output

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/captureOwnerStack.md

Shows the full hierarchy of component and DOM elements surrounding an error thrown by SubComponent.

```text
at SubComponent
at fieldset
at Component
at main
at React.Suspense
at App
```

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

### Starter code for extracting useCounter Hook

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/reusing-logic-with-custom-hooks.md

Initial setup containing timer state and an interval Effect directly inside Counter that needs to be extracted into useCounter.js.

```javascript
import { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return <h1>Seconds passed: {count}</h1>;
}
```

```javascript
// Write your custom Hook in this file!
```

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

### Invalid React Compiler configuration examples

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/eslint-plugin-react-hooks/lints/config.md

Shows invalid configuration settings including typos in option names and unsupported option values.

```javascript
// ❌ Unknown option name
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compileMode: 'all' // Typo: should be compilationMode
    }]
  ]
};

// ❌ Invalid option value
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'everything' // Invalid: use 'all' or 'infer'
    }]
  ]
};
```

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

### Synchronize connection with initial roomId

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/lifecycle-of-reactive-effects.md

Starts synchronization by connecting to the initial 'general' room and returns a cleanup function to disconnect.

```javascript
function ChatRoom({ roomId /* "general" */ }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
  // ...
```

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

### Full example of hydrating server-rendered HTML

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/client/hydrateRoot.md

Demonstrates hydrating pre-rendered server HTML markup in public/index.html with the React counter component defined in App.js via index.js.

```html
<!--
  HTML content inside <div id="root">...</div>
  was generated from App by react-dom/server.
-->
<div id="root"><h1>Hello, world!</h1><button>You clicked me <!-- -->0<!-- --> times</button></div>
```

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

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

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

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

### Define sample product data from JSON API

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/thinking-in-react.md

Example JSON data structure representing products with categories, prices, stock availability, and names used to build the component hierarchy.

```json
[
  { category: "Fruits", price: "$1", stocked: true, name: "Apple" },
  { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
  { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
  { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
  { category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
  { category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
]
```

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

### Declaring useLayoutEffect

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useLayoutEffect.md

Fires synchronously before the browser repaints the screen. Takes a setup function with optional cleanup and an optional array of reactive dependencies.

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

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

### Building a live markdown editor with controlled textarea

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/components/textarea.md

Complete example of a controlled text area updating a markdown preview on every keystroke across multiple files.

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

export default function MarkdownEditor() {
  const [postContent, setPostContent] = useState('_Hello,_ **Markdown**!');
  return (
    <>
      <label>
        Enter some markdown:
        <textarea
          value={postContent}
          onChange={e => setPostContent(e.target.value)}
        />
      </label>
      <hr />
      <MarkdownPreview markdown={postContent} />
    </>
  );
}
```

```javascript
import { Remarkable } from 'remarkable';

const md = new Remarkable();

export default function MarkdownPreview({ markdown }) {
  const renderedHTML = md.render(markdown);
  return <div dangerouslySetInnerHTML={{__html: renderedHTML}} />;
}
```

```json
{
  "dependencies": {
    "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"
  }
}
```

```css
textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
```

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

### Example Owner Stack trace output

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/captureOwnerStack.md

Shows the Owner Stack corresponding to the same error, containing only the Component that created the node containing SubComponent.

```text
at Component
```

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

### Unoptimized input with slow list re-rendering

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useDeferredValue.md

Demonstrates a basic setup where typing into a text input triggers a re-render of a slow component on every keystroke.

```js
function App() {
  const [text, setText] = useState('');
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <SlowList text={text} />
    </>
  );
}
```

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

### Counter example with number state

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useState.md

Demonstrates storing a number in a count state variable and incrementing it when clicking a button.

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

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}
```

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

### observeUsing(observer)

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/Fragment.md

Starts observing all first-level DOM children of the Fragment with the provided observer.

```APIDOC
### observeUsing(observer)

Starts observing all first-level DOM children of the Fragment with the provided observer.

#### Parameters
- `observer`: An `IntersectionObserver` or `ResizeObserver` instance.

#### Returns
`undefined`.

#### Usage Example
```js
const observer = new IntersectionObserver(callback, options);
fragmentRef.current.observeUsing(observer);
```
```

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

### Check for duplicate React installations using npm ls react

Source: https://github.com/reactjs/react.dev/blob/main/src/content/warnings/invalid-hook-call-warning.md

Runs a dependency check in your project folder to verify whether more than one copy of the react package is installed.

```bash
npm ls react
```

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

### useInsertionEffect signature

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useInsertionEffect.md

Syntax definition for useInsertionEffect, taking a setup function and an optional list of reactive dependencies.

```javascript
useInsertionEffect(setup, dependencies?)
```

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

### Write a component starter template

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/your-first-component.md

Starter sandbox template providing a placeholder to write a new custom component from scratch.

```javascript
// Write your component below!

```

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

### Avoid cleanup logic without corresponding setup logic in useEffect

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useEffect.md

Avoid writing cleanup code without matching setup code. Cleanup runs not only on unmount but before every re-render with changed dependencies and during the extra development mount cycle.

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

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

### Wire up onChangeColor event handler in ColorSwitch

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/responding-to-events.md

Initial challenge setup where the ColorSwitch component needs to be connected to the onChangeColor prop passed from the App parent component.

```javascript
export default function ColorSwitch({
  onChangeColor
}) {
  return (
    <button>
      Change color
    </button>
  );
}
```

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

export default function App() {
  const [clicks, setClicks] = useState(0);

  function handleClickOutside() {
    setClicks(c => c + 1);
  }

  function getRandomLightColor() {
    let r = 150 + Math.round(100 * Math.random());
    let g = 150 + Math.round(100 * Math.random());
    let b = 150 + Math.round(100 * Math.random());
    return `rgb(${r}, ${g}, ${b})`;
  }

  function handleChangeColor() {
    let bodyStyle = document.body.style;
    bodyStyle.backgroundColor = getRandomLightColor();
  }

  return (
    <div style={{ width: '100%', height: '100%' }} onClick={handleClickOutside}>
      <ColorSwitch onChangeColor={handleChangeColor} />
      <br />
      <br />
      <h2>Clicks on the page: {clicks}</h2>
    </div>
  );
}
```

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

### Configure Vite with @rolldown/plugin-babel directly

Source: https://github.com/reactjs/react.dev/blob/main/src/content/learn/react-compiler/installation.md

Passes babel-plugin-react-compiler directly to @rolldown/plugin-babel in vite.config.js as an alternative setup.

```javascript
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';

export default defineConfig({
  plugins: [
    react(),
    babel({
      plugins: ['babel-plugin-react-compiler'],
    }),
  ],
});
```

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

### Connecting to an external system using useEffect

Source: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useEffect.md

Call useEffect at the top level of your component to synchronize with an external system. Pass a setup function that initiates the connection and returns a cleanup function to disconnect, along with all reactive dependencies.

```javascript
import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

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