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.