Hook use() - Lee promesas y valores de contexto con soporte condicional

import { use, Suspense } from "react";
 
// Leyendo una promesa -- debe estar envuelta en Suspense
function UserProfile({ userPromise }: { userPromise: Promise<{ name: string; email: string }> }) {
  const user = use(userPromise);
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}
 
// Leyendo contexto -- reemplaza useContext
const ThemeContext = React.createContext<"light" | "dark">("light");
 
function ThemedButton() {
  const theme = use(ThemeContext);
  return <button className={theme === "dark" ? "bg-gray-800 text-white" : "bg-white"}>Haz clic en mí</button>;
}
 
// Uso
function App() {
  const userPromise = fetchUser(1); // crea la promesa fuera del renderizado, o en un Server Component
  return (
    <ThemeContext value="dark">
      <Suspense fallback={<p>Cargando usuario...</p>}>
        <UserProfile userPromise={userPromise} />
      </Suspense>
      <ThemedButton />
    </ThemeContext>
  );
}

// Un panel que carga condicionalmente diferentes datos según el rol del usuario
"use client";
 
import { use, Suspense, createContext } from "react";
 
type User = { id: string; name: string; role: "admin" | "viewer" };
type Stats = { revenue: number; users: number; orders: number };
type Activity = { id: string; description: string; timestamp: string };
 
const AuthContext = createContext<User | null>(null);
 
function DashboardContent({
  statsPromise,
  activityPromise,
}: {
  statsPromise: Promise<Stats>;
  activityPromise: Promise<Activity[]>;
}) {
  const user = use(AuthContext);
 
  if (!user) {
    return <p>Por favor, inicia sesión.</p>;
  }
 
  // use() puede ser llamado condicionalmente -- esto es único entre los hooks de React
  if (user.role === "admin") {
    const stats = use(statsPromise);
    return (
      <div>
        <h2>Panel de administración</h2>
        <dl>
          <dt>Ingresos</dt><dd>${stats.revenue.toLocaleString()}</dd>
          <dt>Usuarios</dt><dd>{stats.users.toLocaleString()}</dd>
          <dt>Pedidos</dt><dd>{stats.orders.toLocaleString()}</dd>
        </dl>
      </div>
    );
  }
 
  const activity = use(activityPromise);
  return (
    <div>
      <h2>Feed de actividad</h2>
      <ul>
        {activity.map((a) => (
          <li key={a.id}>
            {a.description} <time>{a.timestamp}</time>
          </li>
        ))}
      </ul>
    </div>
  );
}
 
export default function Dashboard({
  user,
  statsPromise,
  activityPromise,
}: {
  user: User | null;
  statsPromise: Promise<Stats>;
  activityPromise: Promise<Activity[]>;
}) {
  return (
    <AuthContext value={user}>
      <Suspense fallback={<p>Cargando panel...</p>}>
        <DashboardContent
          statsPromise={statsPromise}
          activityPromise={activityPromise}
        />
      </Suspense>
    </AuthContext>
  );
}

// app/page.tsx (Server Component)
import UserCard from "./UserCard";
 
export default function Page() {
  // Comienza a obtener pero NO esperes -- deja que el cliente lo resuelva
  const userPromise = fetchUser(1);
  return <UserCard userPromise={userPromise} />;
}

// app/UserCard.tsx
"use client";
 
import { use } from "react";
 
export default function UserCard({ userPromise }: { userPromise: Promise<{ name: string }> }) {
  const user = use(userPromise);
  return <h2>{user.name}</h2>;
}

import { use, createContext } from "react";
 
const FeatureFlagContext = createContext<Set<string>>(new Set());
 
function FeatureGate({ flag, children }: { flag: string; children: React.ReactNode }) {
  const flags = use(FeatureFlagContext);
  if (!flags.has(flag)) return null;
  return <>{children}</>;
}

function OrderDetails({ orderPromise }: { orderPromise: Promise<{ id: string; userId: string }> }) {
  const order = use(orderPromise);
  // Puedes usar el valor resuelto para crear otra promesa
  // pero cachéala para evitar recrearla en cada renderizado
  const userPromise = useMemo(() => fetchUser(order.userId), [order.userId]);
  const user = use(userPromise);
 
  return (
    <div>
      <p>Pedido #{order.id}</p>
      <p>Cliente: {user.name}</p>
    </div>
  );
}