React

https://es.react.dev/reference/
Admin
React is a JavaScript library for building user interfaces with reusable components, hooks, and APIs...
Tokens:140,887
Snippets:1,286
Trust Score:10
Update:5 months ago
Show doc for...
Tokens:
Raw
### Basic React App Setup

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

Standard setup for a React application using createRoot from react-dom/client.

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

import App from './App';

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

```

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

### Start Streaming with onShellReady

Source: https://es.react.dev/reference/react-dom/server/renderToPipeableStream

This example demonstrates how to initiate the streaming of HTML to the client once the application shell has been rendered. The `onShellReady` callback is used to set the response headers and begin piping the response.

```javascript
const { pipe } = renderToPipeableStream(<App />, {
  bootstrapScripts: ['/main.js'],
  onShellReady() {
    response.setHeader('content-type', 'text/html');
    pipe(response);
  }
});
```

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

### Example: Theme Context

Source: https://es.react.dev/reference/react/useContext

A complete example demonstrating how to create a context, provide a value, and consume it using useContext in different components.

```APIDOC
## Example: Theme Context

### Description
This example shows a full implementation of context with `useContext`, including creating a context, providing a value, and consuming it in multiple components.

### Code
```javascript
import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

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

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

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

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}
```
```

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

### Complete example using createElement

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

A full example demonstrating how to create a React element and render a custom component using React.createElement().

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

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

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

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

### Full Example: Theming with useContext

Source: https://es.react.dev/reference/react/useContext

This example demonstrates how to create a theme context, provide it, and consume it in multiple components (Panel and Button) to apply styles.

```javascript
import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

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

function Form() {
  return (
    <Panel title="Welcome">
      <Button>Registrarse</Button>
      <Button>Iniciar sesión</Button>
    </Panel>
  );
}

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

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

```

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

### Hydrate a React application with index.js

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

This example shows the complete setup for hydrating a React application using hydrateRoot in an index.js file, including necessary imports and the call to hydrateRoot.

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

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

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

### Basic useActionState Example

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

A simple example demonstrating how to use useActionState to manage a counter. The state is updated when the 'Increment' button is clicked.

```javascript
import { useActionState } from "react";  

async function increment(previousState, formData) {  
  return previousState + 1;  
}  

function StatefulForm({}) {  
  const [state, formAction] = useActionState(increment, 0);  
  return (  
    <form>  
      {state}  
      <button formAction={formAction}>Increment</button>  
    </form>  
  )  
}
```

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

### API Routes for Data Fetching

Source: https://es.react.dev/reference/rsc/server-components

Example of API routes set up to fetch data from a database. These routes handle GET requests for notes and authors by ID.

```javascript
import db from './database';
app.get(`/api/notes/:id`, async (req, res) => {
  const note = await db.notes.get(id);
  res.send({note});
});
app.get(`/api/authors/:id`, async (req, res) => {
  const author = await db.authors.get(id);
  res.send({author});
});
```

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

### Example: Linking Input with Description using useId

Source: https://es.react.dev/reference/react/useId

This example demonstrates how to use useId to generate a unique ID for an input's description, ensuring accessibility even when the component is used multiple times.

```javascript
<>
  <input type="password" aria-describedby={passwordHintId} />
  <p id={passwordHintId}>
</>
```

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

function PasswordField() {
  const passwordHintId = useId();
  return (
    <>
      <label>
        Password:
        <input
          type="password"
          aria-describedby={passwordHintId}
        />
      </label>
      <p id={passwordHintId}>
        The password should contain at least 18 characters
      </p>
    </>
  );
}

```

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

### Basic Suspense Usage Example

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

This example demonstrates how to use the Suspense component to show a loading indicator (`<Loading />`) while a list of albums is being fetched and rendered by the `<Albums />` component. Suspense will automatically switch from the fallback to the albums once they are ready.

```APIDOC
## Visualización de una interfaz alternativa mientras se carga el contenido

### Description
This example shows how to wrap a component that fetches data with `<Suspense>` to display a fallback UI. React will render the `fallback` prop until the `children` component has finished loading its data and is ready to render.

### Code Example

```jsx
import { Suspense } from 'react';
import Albums from './Albums.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Albums artistId={artist.id} />
      </Suspense>
    </>
  );
}

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

### Usage Notes
Only data sources enabled for Suspense will trigger a Suspense component. This includes data fetching in frameworks like Relay and Next.js, code splitting with `lazy`, and reading cached promises with `use`. Suspense does not detect data fetching done within Effects or event handlers.
```

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

### Complete useReducer Example with Counter

Source: https://es.react.dev/reference/react/useReducer

A full example demonstrating a counter component using `useReducer`. It includes the reducer function, state initialization, and a button to dispatch an action to increment the age.

```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' })
      }}>
        Incrementar edad
      </button>
      <p>¡Hola! Tú tienes {state.age}.</p>
    </>
  );
}
```

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

### Example Usage of useEffect

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

This example demonstrates how to use `useEffect` to establish and disconnect a connection to an external chat system, managing the connection lifecycle based on `serverUrl` and `roomId` changes.

```APIDOC
```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]);

  // ... other component logic
}
```
```

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

### Counter Example with useState

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

This example demonstrates using `useState` to manage a number state for a counter. Clicking the button increments the count.

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

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

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

  return (
    <button onClick={handleClick}>
      Hiciste clic {count} veces
    </button>
  );
}
```

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

### Basic useLayoutEffect Syntax

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

The basic syntax for useLayoutEffect. It takes a setup function and an optional dependencies array.

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

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

### useLayoutEffect Example

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

An example demonstrating how to use useLayoutEffect to measure the height of an element before the browser repaints.

```APIDOC
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);
  }, []);
  // ...
}
```

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

### Optimistic Form Update Example

Source: https://es.react.dev/reference/react/useOptimistic

An example demonstrating how to use useOptimistic for optimistic form updates, improving perceived performance by updating the UI immediately.

```APIDOC
## Optimistic Form Update

### Description
The `useOptimistic` Hook provides an optimistic way to update the UI before a background operation completes, such as a network request. In the context of forms, this technique helps applications feel more responsive. When a user submits a form, instead of waiting for the server response to reflect changes, the UI updates immediately with the expected result. For example, when a user types a message in the form and then presses the 'Send' button, the `useOptimistic` Hook allows the message to appear immediately in the list with a 'Sending...' label, even before the message is sent to the server. This 'optimistic' approach gives the impression of speed and responsiveness. The form then attempts to actually send the message in the background. Once the server confirms the message has been received, the 'Sending...' label is removed.

### Code Example
```javascript
import { useOptimistic, useState, useRef, startTransition } from "react";
import { deliverMessage } from "./actions.js";

function Thread({ messages, sendMessageAction }) {
  const formRef = useRef();
  function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    startTransition(async () => {
      await sendMessageAction(formData);
    });
  }
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      {
        text: newMessage,
        sending: true
      },
      ...state,
    ]
  );

  return (
    <>
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Enviando...)</small>}
        </div>
      ))}
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([
    { text: "¡Hola!", sending: false, key: 1 }
  ]);
  async function sendMessageAction(formData) {
    const sentMessage = await deliverMessage(formData.get("message"));
    startTransition(() => {
      setMessages((messages) => [{ text: sentMessage }, ...messages]);
    })
  }
  return <Thread messages={messages} sendMessageAction={sendMessageAction} />;
}
```
```

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

### Lazy component example with dynamic import and delay

Source: https://es.react.dev/reference/react/lazy

This example demonstrates a lazy-loaded component with a simulated delay to observe the loading state. It uses `useState` to control the visibility of the preview and `Suspense` to show a `Loading` component while the `MarkdownPreview` is being fetched.

```javascript
import { useState, Suspense, lazy } from 'react';
import Loading from './Loading.js';

const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));

export default function MarkdownEditor() {
  const [showPreview, setShowPreview] = useState(false);
  const [markdown, setMarkdown] = useState('¡Hola, **mundo**!');
  return (
    <>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <label>
        <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
        Show preview
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Preview</h2>
          <MarkdownPreview markdown={markdown} />
        </Suspense>
      )}
    </>
  );
}

// Agrega un retardo fijo para que puedas ver el estado de carga
function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}
```

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

### Basic createRoot usage example

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

This snippet shows the fundamental usage of createRoot to initialize a React application within a DOM element.

```javascript
const root = createRoot(domNode, options?)
```

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

### useEffect Hook Syntax

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

The basic syntax for using the useEffect Hook. It takes a setup function and an optional dependencies array.

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

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

### Client-Side Rendering to HTML (Discouraged)

Source: https://es.react.dev/reference/react-dom/server/renderToString

Example showing how to render a component to HTML on the client-side using createRoot, as using react-dom/server on the client is discouraged.

```APIDOC
import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
  root.render(<MyIcon />);
});
console.log(div.innerHTML); // For example, "<svg>...</svg>"
```

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

### Subscribing to an External Store

Source: https://es.react.dev/reference/react/useSyncExternalStore

Example of using `useSyncExternalStore` to subscribe to an external store like `todosStore`. Ensure your store provides `subscribe` and `getSnapshot` methods.

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

import { todosStore } from './todoStore.js';

function TodosApp() {
  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);

  // ...
}
```

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

### Memoizing a Callback with useCallback

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

This example shows how to use useCallback to memoize the handleSubmit function. It will only be recreated if productId or referrer change.

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

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);
}
```

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

### Example of Overwriting Theme Context

Source: https://es.react.dev/reference/react/useContext

This example shows how nested ThemeContext providers can result in different theme values being applied to components. The Button inside Footer receives 'light', while other components receive 'dark'.

```javascript
import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

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

function Form() {
  return (
    <Panel title="Bienvenido">
      <Button>Registrarse</Button>
      <Button>Iniciar sesión</Button>
      <ThemeContext.Provider value="light">
        <Footer />
      </ThemeContext.Provider>
    </Panel>
  );
}

function Footer() {
  return (
    <footer>
      <Button>Ajustes</Button>
    </footer>
  );
}

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

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

```

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

### Basic Usage of renderToString

Source: https://es.react.dev/reference/react-dom/server/renderToString

Example of how to import and use renderToString to render a React component to an HTML string on the server.

```APIDOC
import { renderToString } from 'react-dom/server';

const html = renderToString(<App />);
```

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

### Optimistic Form Update Example

Source: https://es.react.dev/reference/react/useOptimistic

This example shows how to use useOptimistic for form submissions. It updates the message list optimistically as the user types and submits, showing a 'Sending...' status before server confirmation.

```javascript
import { useOptimistic, useState, useRef, startTransition } from "react";
import { deliverMessage } from "./actions.js";

function Thread({ messages, sendMessageAction }) {
  const formRef = useRef();
  function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    startTransition(async () => {
      await sendMessageAction(formData);
    });
  }
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      {
        text: newMessage,
        sending: true
      },
      ...state,
    ]
  );

  return (
    <>
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Enviando...)</small>}
        </div>
      ))}
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([
    { text: "¡Hola!", sending: false, key: 1 }
  ]);
  async function sendMessageAction(formData) {
    const sentMessage = await deliverMessage(formData.get("message"));
    startTransition(() => {
      setMessages((messages) => [{ text: sentMessage }, ...messages]);
    })
  }
  return <Thread messages={messages} sendMessageAction={sendMessageAction} />;
}
```

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

### Basic Suspense Setup in React App

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

Sets up a basic Suspense boundary with a fallback spinner for routing content. This is the initial state before implementing transitions.

```jsx
import { Suspense, useState } from 'react';
import IndexPage from './IndexPage.js';
import ArtistPage from './ArtistPage.js';
import Layout from './Layout.js';

export default function App() {
  return (
    <Suspense fallback={<BigSpinner />}>
      <Router />
    </Suspense>
  );
}

function Router() {
  const [page, setPage] = useState('/');

  function navigate(url) {
    setPage(url);
  }

  let content;
  if (page === '/') {
    content = (
      <IndexPage navigate={navigate} />
    );
  } else if (page === '/the-beatles') {
    content = (
      <ArtistPage
        artist={{
          id: 'the-beatles',
          name: 'The Beatles',
        }}
      />
    );
  }
  return (
    <Layout>
      {content}
    </Layout>
  );
}

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

```

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

### useEffect API Reference

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

The useEffect Hook allows you to synchronize a component with an external system. It accepts a setup function and an optional dependencies array.

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

### Description
Declares an effect with `useEffect` at the top level of your component. The `setup` function contains the logic for your Effect, and can optionally return a cleanup function. React executes the `setup` function after the component is added to the DOM, and after each render with changed dependencies. The cleanup function is executed before the old effect is removed and one last time after the component is removed from the DOM.

### Parameters
* `setup`: The function containing your Effect's logic. This function can optionally return a cleanup function.
* `dependencies` (optional): An array of all reactive values referenced within the `setup` function (props, state, variables, functions declared in the component body). If omitted, the effect runs after every render. If an empty array `[]` is provided, the effect runs only once after the initial render.

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

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

### Counter Component Example

Source: https://es.react.dev/reference/react/act

This is a sample Counter component used to demonstrate testing with act(). It includes state, event handlers, and a useEffect hook.

```javascript
function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(prev => prev + 1);
  }
  
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  )
}
```

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

### Read Promise and Context with use

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

Import `use` from 'react' to read values from Promises and contexts. This example shows reading a message from a Promise and theme from a Context.

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

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...
}
```

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

### Asynchronous Server Component example

Source: https://es.react.dev/reference/rsc/server-components

Demonstrates an asynchronous Server Component, a feature that allows `await` during rendering. This pattern is useful for data fetching operations that can be performed server-side.

```javascript
async function Page({page}) {  
  //...  
}
```

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

### App Setup with StrictMode

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

Configuring StrictMode for a React application by wrapping the root component. This enables additional development checks.

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

import App from './App';

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

```

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

### Direct Calculation Without Caching

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

This example shows a direct calculation within the component body, which will re-execute on every render. Compare this to the useMemo approach for performance optimization.

```javascript
function TodoList({ todos, tab, theme }) {
  const visibleTodos = filterTodos(todos, tab);

  // ...
}
```

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

### Asynchronous Rendering in Server Components (React)

Source: https://es.react.dev/reference/react/cache

This example demonstrates an asynchronous Server Component that fetches data. Asynchronous rendering is only supported for Server Components.

```javascript
async function AnimatedWeatherCard({city}) {
	const temperature = await getTemperature(city);
	// ...
}
```

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

### Basic useReducer Example: Form Component

Source: https://es.react.dev/reference/react/useReducer

Manages form state with 'name' and 'age' fields. Use dispatch to send actions for state updates.

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

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      return {
        name: state.name,
        age: state.age + 1
      };
    }
    case 'changed_name': {
      return {
        name: action.nextName,
        age: state.age
      };
    }
  }
  throw Error('Unknown action: ' + action.type);
}

const initialState = { name: 'Taylor', age: 42 };

export default function Form() {
  const [state, dispatch] = useReducer(reducer, initialState);

  function handleButtonClick() {
    dispatch({ type: 'incremented_age' });
  }

  function handleInputChange(e) {
    dispatch({
      type: 'changed_name',
      nextName: e.target.value
    }); 
  }

  return (
    <>
      <input
        value={state.name}
        onChange={handleInputChange}
      />
      <button onClick={handleButtonClick}>
        Incrementar edad
      </button>
      <p>Hola, {state.name}. Tú tienes {state.age}.</p>
    </>
  );
}
```

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

### Focusing an Input Element

Source: https://es.react.dev/reference/react/useRef

This example demonstrates focusing an input element when a button is clicked, using `useRef` to get a reference to the input DOM node.

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

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}
```

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

### Basic renderToPipeableStream usage

Source: https://es.react.dev/reference/react-dom/server/renderToPipeableStream

This example shows the basic usage of renderToPipeableStream to render a React app. It pipes the response to the server's response object after setting the content type. Ensure you have a corresponding client-side hydration setup.

```javascript
import { renderToPipeableStream } from 'react-dom/server';

const { pipe } = renderToPipeableStream(<App />, {
  bootstrapScripts: ['/main.js'],

  onShellReady() {
    response.setHeader('content-type', 'text/html');
    pipe(response);
  }
});

```

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

### Esperar a que se cargue todo el contenido para rastreadores y generación estática

Source: https://es.react.dev/reference/react-dom/server/renderToReadableStream

Streamear ofrece una mejor experiencia de usuario porque permite ver el contenido a medida que este está disponible. Sin embargo, cuando un rastreador visita tu página, o si generas las páginas en tiempo de compilacón, quizá prefieras dejar que todo el contenido cargue primero, y después producir el HTML final en lugar de revelarlo de forma progresiva. Puedes esperar a que todo el contenido cargue esperando a la promesa `stream.allReady`.

```APIDOC
async function handler(request) {
  try {
    let didError = false;
    const stream = await renderToReadableStream(<App />, {
      bootstrapScripts: ['/main.js'],
      onError(error) {
        didError = true;
        console.error(error);
        logServerCrashReport(error);
      }
    });

    let isCrawler = // ... depende de tu estrategia de detección de bots ...
    if (isCrawler) {
      await stream.allReady;
    }

    return new Response(stream, {
      status: didError ? 500 : 200,
      headers: { 'content-type': 'text/html' },
    });
  } catch (error) {
    return new Response('<h1>Something went wrong</h1>', {
      status: 500,
      headers: { 'content-type': 'text/html' },
    });
  }
}
```

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

### Ejemplo completo de actualización de contexto con useState

Source: https://es.react.dev/reference/react/useContext

Este ejemplo demuestra cómo un componente padre (`MyApp`) gestiona el estado del tema y lo proporciona a través de `ThemeContext.Provider`. Los componentes hijos (`Panel`, `Button`) consumen este contexto usando `useContext`. Marcar la casilla 'Usar modo oscuro' actualiza el estado `theme`, lo que provoca una nueva renderización de los componentes que dependen del contexto.

```javascript
import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Form />
      <label>
        <input
          type="checkbox"
          checked={theme === 'dark'}
          onChange={(e) => {
            setTheme(e.target.checked ? 'dark' : 'light')
          }}
        />
        Usar modo oscuro
      </label>
    </ThemeContext.Provider>
  )
}

function Form({ children }) {
  return (
    <Panel title="Bienvenido">
      <Button>Registrarse</Button>
      <Button>Iniciar sesión</Button>
    </Panel>
  );
}

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

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}
```

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

### Example of RowList Component Rendering

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

This example demonstrates how the `RowList` component, using `Children.map`, wraps each child element in a `div` with the class `Row`.

```jsx
<RowList>
  <p>Este es el primer elemento.</p>
  <p>Este es el segundo elemento.</p>
  <p>Este es el tercer elemento.</p>
</RowList>
```

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

### Connecting to a Chat Server with useEffect

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

This example demonstrates connecting to an external chat system using useEffect. The effect sets up a connection and cleans it up on unmount or when dependencies change. It's useful for managing subscriptions or external API interactions.

```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();
    };
  }, [roomId, serverUrl]);

  return (
    <>
      <label>
        URL del servidor:{' '}
        <input
          value={serverUrl}
          onChange={e => setServerUrl(e.target.value)}
        />
      </label>
      <h1>¡Bienvenido a la sala {roomId}!</h1>
    </>
  );
}

export default function App() {
  const [roomId, setRoomId] = useState('general');
  const [show, setShow] = useState(false);
  return (
    <>
      <label>
        Elija el sitio de chat:{' '}
        <select
          value={roomId}
          onChange={e => setRoomId(e.target.value)}
        >
          <option value="general">general</option>
          <option value="viaje">viaje</option>
          <option value="música">música</option>
        </select>
      </label>
      <button onClick={() => setShow(!show)}>
        {show ? 'Cerrar chat' : 'Abrir chat'}
      </button>
      {show && <hr />}
      {show && <ChatRoom roomId={roomId} />}
    </>
  );
}
```

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

### Incorrect Hook Usage Examples

Source: https://es.react.dev/reference/rules/rules-of-hooks

These examples demonstrate common mistakes when calling Hooks, such as calling them inside conditionals, loops, after return statements, within event handlers, or inside other Hooks like useMemo.

```javascript
function Bad({ cond }) {
  if (cond) {
    // 🔴 Bad: Hook called inside a condition (solution, move it outside the condition!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad() {
  for (let i = 0; i < 10; i++) {
    // 🔴 Bad: Hook called inside a loop (solution, move it outside the loop!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad({ cond }) {
  if (cond) {
    return;
  }
  // 🔴 Bad: Hook called after a conditional return (solution, move it before the return!)
  const theme = useContext(ThemeContext);
  // ...
}

function Bad() {
  function handleClick() {
    // 🔴 Bad: Hook called inside an event handler function (solution, move it outside the event handler function!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad() {
  const style = useMemo(() => {
    // 🔴 Bad: Hook called inside a useMemo (solution, move it outside the useMemo function!)
    const theme = useContext(ThemeContext);
    return createStyle(theme);
  });
  // ...
}

class Bad extends React.Component {
  render() {
    // 🔴 Bad: Hook called inside a class component (solution, write a functional component instead of a class component!)
    useEffect(() => {})
    // ...
  }
}

function Bad() {
  try {
    // 🔴 Bad: Hook called inside a try/catch/finally block (solution, move it outside the block!)
    const [x, setX] = useState(0);
  } catch {
    const [x, setX] = useState(1);
  }
}
```

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

### Example: Memoized component re-renders only when relevant props change

Source: https://es.react.dev/reference/react/memo

This example demonstrates how a memoized component (`Greeting`) only re-renders when its `name` prop changes, not when unrelated state (`address`) in the parent component (`MyApp`) is updated.

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

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Nombre{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Dirección{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
  return <h3>¡Hola{name && ', '}{name}!</h3>;
});
```

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

### Define Application Shell Structure

Source: https://es.react.dev/reference/react-dom/server/renderToPipeableStream

This example shows how to structure your React component hierarchy to define the application's shell. The shell includes components that are rendered immediately, outside of any Suspense boundaries.

```jsx
function ProfilePage() {
  return (
    <ProfileLayout>
      <ProfileCover />
      <Suspense fallback={<BigSpinner />}>
        <Sidebar>
          <Friends />
          <Photos />
        </Sidebar>
        <Suspense fallback={<PostsGlimmer />}>
          <Posts />
        </Suspense>
      </Suspense>
    </ProfileLayout>
  );
}
```

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

### Connecting to an External System with useEffect

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

This example demonstrates connecting to an external system (like a chat server) and disconnecting when the component unmounts or dependencies change. Ensure all reactive values used in the effect are listed in the dependencies array.

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

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

### Basic <select> with <option> Components

Source: https://es.react.dev/reference/react-dom/components/option

Demonstrates the fundamental structure of a select dropdown with multiple options. Each option has a value and display text.

```jsx
<select>
  <option value="someOption">Alguna opción</option>
  <option value="otherOption">Otra opción</option>
</select>
```

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

### AnimationEvent

Source: https://es.react.dev/reference/react-dom/components/common

Handles CSS animation events like start, iteration, and end.

```APIDOC
## onAnimationStart, onAnimationIteration, onAnimationEnd

### Description
Handles CSS animation events.

### Parameters
- `e` (AnimationEvent): A React event object with additional properties: `animationName`, `elapsedTime`, `pseudoElement`.
```

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

### useEffect with Cleanup

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

Example of an Effect with a cleanup function to disconnect a connection. This prevents resource leaks.

```javascript
useEffect(() => {

    const connection = createConnection(serverUrl, roomId);

    connection.connect();

    return () => connection.disconnect();

  }, [roomId]);
```

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

### createRoot

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

Initializes a React root for a given DOM node. This is the entry point for a React application or a part of it.

```APIDOC
## createRoot(domNode, options?)

### Description
Calls `createRoot` to create a React root and render content inside a browser DOM element.

### Method
`createRoot`

### Parameters
- **domNode** (Element): A DOM element. React will create a root for this DOM element and allow you to call functions on the root, such as `render` and display the content rendered by React.
- **options** (Object) - Optional: An object containing options for this React root.
  - **onCaughtError** (Function) - Optional: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
  - **onUncaughtError** (Function) - Optional: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
  - **onRecoverableError** (Function) - Optional: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
  - **identifierPrefix** (string) - Optional: A string prefix that React uses for IDs generated by `useId`. Useful for avoiding conflicts when using multiple roots on the same page.

### Returns
`createRoot` returns an object with two methods: `render` and `unmount`.

### Warnings
- If your application is server-rendered, using `createRoot()` is not allowed. Instead, use `hydrateRoot()`.
- You will likely only call `createRoot` once in your application. If you use a framework, it might make this call for you.
- When you want to render a piece of JSX into another part of the DOM tree that is not a child of your component (e.g., a modal or a tooltip), use `createPortal` instead of `createRoot`.
```

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

### Count Children with count

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

Call `Children.count(children)` to get the number of children passed to a component.

```APIDOC
## Children.count

### Description
Returns the total number of direct children passed to a component.

### Method Signature
`Children.count(children)`

### Parameters
- **children**: The object to count.

### Example
```javascript
import { Children } from 'react';

export default function RowList({ children }) {
  return (
    <div className="RowList">
      <h1 className="RowListHeader">
        Total rows: {Children.count(children)}
      </h1>
      {Children.map(children, child =>
        <div className="Row">
          {child}
        </div>
      )}
    </div>
  );
}
```
```

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

### Complete Functional Component Migration

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

A complete functional component example demonstrating the migration from class component lifecycle methods to `useState` and `useEffect`. It includes state management for `serverUrl` and effect management for the chat connection.

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

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

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

  return (
    <>
      <label>
        Server URL:{' '}
        <input
          value={serverUrl}
          onChange={e => setServerUrl(e.target.value)}
        />
      </label>
      <h1>¡Bienvenido a la sala {roomId}!</h1>
    </>
  );
}

```

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

### Adding a Label to a Custom Hook

Source: https://es.react.dev/reference/react/useDebugValue

Example of using useDebugValue to add a readable debug value to a custom Hook.

```APIDOC
import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}
```

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

### Basic PureComponent Example

Source: https://es.react.dev/reference/react/PureComponent

Extend PureComponent instead of Component to skip re-rendering a class component when its props and state are the same.

```javascript
class Greeting extends PureComponent {
  render() {
    return <h1>¡Hola, {this.props.name}!</h1>;
  }
}
```

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

### Deferring UI Updates with useDeferredValue

Source: https://es.react.dev/reference/react/useDeferredValue

Example demonstrating how to use useDeferredValue to show stale content while updated content loads.

```APIDOC
## Deferring UI Updates

### Description
Call `useDeferredValue` at the top level of your component to defer updating a part of your UI.

During the initial render, the deferred value will be the same as the value you provide. During updates, the deferred value will lag behind the latest value. Specifically, React will first re-render without updating the deferred value, and then attempt to re-render with the new value in the background.

### Example
```javascript
import { useState, useDeferredValue } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  // ... render UI based on deferredQuery
}
```
```

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

### Basic preconnect usage

Source: https://es.react.dev/reference/react-dom/preconnect

Call `preconnect` to establish an early connection to a server. Multiple calls to the same server have the same effect as a single call.

```javascript
preconnect("https://example.com");
```

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

### Capture Owner Stack in Development

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

Call captureOwnerStack to get the current Owner Stack. This function is only available in development environments.

```javascript
const stack = captureOwnerStack();
```

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

### Server-Side Rendering with Express

Source: https://es.react.dev/reference/react-dom/server/renderToString

An example demonstrating how to use renderToString within an Express.js route handler to send server-rendered HTML to the client.

```APIDOC
import { renderToString } from 'react-dom/server';

// The route handler syntax depends on your backend framework.
app.use('/', (request, response) => {
  const html = renderToString(<App />);
  response.send(html);
});
```

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

### Measure Layout with useLayoutEffect

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

Use useLayoutEffect to measure layout before the browser repaints the screen. This example measures the height of a tooltip element.

```javascript
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);
  }, []);
  // ...
```

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

### Memoizing Expensive Calculations with useMemo

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

This example demonstrates how to use `useMemo` to memoize an expensive calculation (`filterTodos`). When the `theme` changes, the component re-renders, but thanks to `useMemo`, the `filterTodos` function is not re-executed because its dependencies (`todos` and `tab`) have not changed. This significantly improves performance for interactions that don't affect the memoized value.

```javascript
import { useMemo } from 'react';
import { filterTodos } from './utils.js'

export default function TodoList({ todos, theme, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  return (
    <div className={theme}>
      <p><b>Nota: ¡<code>filterTodos</code> se ralentiza artificialmente!</b></p>
      <ul>
        {visibleTodos.map(todo => (
          <li key={todo.id}>
            {todo.completed ?
              <s>{todo.text}</s> :
              todo.text
            }
          </li>
        ))}
      </ul>
    </div>
  );
}

```

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

### Rendered Output of RowList Example

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

This shows the resulting HTML structure after the `RowList` component processes its children, illustrating the wrapping divs.

```html
<div className="RowList">
  <div className="Row">
    <p>Este es el primer elemento.</p>
  </div>
  <div className="Row">
    <p>Este es el segundo elemento.</p>
  </div>
  <div className="Row">
    <p>Este es el tercer elemento.</p>
  </div>
</div>
```

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

### Métodos de Ciclo de Vida en Componentes de Clase

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

Implementa `componentDidMount`, `componentDidUpdate`, y `componentWillUnmount` para gestionar efectos secundarios como la conexión a un servicio externo y su limpieza.

```javascript
import { Component } from 'react';
import { createConnection } from './chat.js';

export default 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();
  }

  setupConnection() {
    this.connection = createConnection(
      this.state.serverUrl,
      this.props.roomId
    );
    this.connection.connect();    
  }

  destroyConnection() {
    this.connection.disconnect();
    this.connection = null;
  }

  render() {
    return (
      <>
        <label>
          Server URL:{' '}
          <input
            value={this.state.serverUrl}
            onChange={e => {
              this.setState({
                serverUrl: e.target.value
              });
            }}
          />
        </label>
        <h1>¡Bienvenido a la sala {this.props.roomId}!</h1>
      </>
    );
  }
}
```
Tokens:
Raw