El nuevo hook use() de React 19

React 19 introduce use(), un nuevo hook primitivo que permite leer el valor de una Promesa o un Contexto directamente durante el render.

Leer una Promesa

Antes de React 19, para consumir datos asíncronos necesitabas useEffect + useState. Con use() puedes suspender el componente mientras la promesa resuelve:

import { use, Suspense } from 'react';

function UserProfile({ userPromise }) {
  const user = use(userPromise); // suspende hasta que resuelva
  return <h1>{user.name}</h1>;
}

export default function App() {
  const userPromise = fetchUser(1);
  return (
    <Suspense fallback={<p>Cargando...</p>}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

El componente se suspende automáticamente y el <Suspense> muestra el fallback hasta que la promesa resuelve.

Leer un Contexto

use() también puede leer contextos, igual que useContext, pero con una ventaja clave: puede usarse dentro de condicionales y bucles.

import { use } from 'react';
import { ThemeContext } from './ThemeContext';

function Button({ isAdmin }) {
  if (isAdmin) {
    const theme = use(ThemeContext); // ✅ dentro de un condicional
    return <button style={{ color: theme.primary }}>Admin</button>;
  }
  return <button>Normal</button>;
}

Esto no era posible con useContext ya que los hooks no pueden llamarse condicionalmente.

Diferencias clave

---

use() no reemplaza todos los casos de useEffect, pero para leer datos asíncronos en el render es la forma más limpia que React ha ofrecido hasta ahora.