use(): hook, který smíte volat v podmínce

use není klasický hook. Je to API, které umí přečíst hodnotu ze zdroje — z Promise nebo z kontextu — a na rozdíl od ostatních hooků ho můžete volat v podmínkách i cyklech.

Čtení Promise

Když komponenta zavolá use(promise) a promise ještě není vyřešená, komponenta se suspendne a zobrazí se nejbližší <Suspense> fallback. Jakmile se promise vyřeší, React komponentu vyrenderuje znovu s hodnotou. Při chybě se uplatní nejbližší Error Boundary.

// app/page.tsx — Server Component
import { Suspense } from "react";
import { Comments } from "./Comments";
 
export default function Page() {
  const commentsPromise = getComments(); // žádné await!
  return (
    <Suspense fallback={<p>Načítám komentáře…</p>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

// Comments.tsx
"use client";
import { use } from "react";
 
export function Comments({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {
  const comments = use(commentsPromise);
  return comments.map((c) => <p key={c.id}>{c.text}</p>);
}

Serverová komponenta začne data načítat hned, ale nečeká na ně — stránka se streamuje a komentáře „doplavou“ později.

Pozor na nestabilní promise

Nevytvářejte promise přímo v renderu klientské komponenty. Každý render by vytvořil novou promise, komponenta by se znovu suspendla a skončili byste ve smyčce. Promise musí být stabilní: přijít ze Server Componenty, z cache knihovny (TanStack Query, SWR) nebo z useMemo nad stabilními vstupy.

Kontext v podmínce

function Badge({ show }: { show: boolean }) {
  if (!show) return null;
  const theme = use(ThemeContext); // s useContext by to nešlo
  return <span className={theme.badge}>Nové</span>;
}

use(Context) dělá totéž co useContext, jen je flexibilnější. V nových komponentách klidně používejte jen use.