use() Hook

React 🟡 Mid

Définition

API stable depuis React 19 (5 décembre 2024) qui lit une Promise ou un Context directement pendant le rendu. Contrairement aux hooks classiques, use() peut être appelée dans une condition ou une boucle. Sur une Promise, le composant suspend jusqu'à la résolution (Suspense) ; sur un Context, elle remplace useContext.

Analogie

Comme un lecteur universel : qu'on lui donne un CD (Promise) ou une clé USB (Context), il lit les deux.

Exemple de code

// Server Component : on passe la Promise sans l'attendre
export default function Page() {
  const commentsPromise = db.comments.list();
  return (
    <Suspense fallback={<Spinner />}>
      <Comments promise={commentsPromise} />
    </Suspense>
  );
}
// Client Component
'use client';
function Comments({ promise }) {
  const comments = use(promise);      // suspend jusqu'à résolution
  const theme = use(ThemeContext);    // remplace useContext
  return comments.map(c => <p key={c.id}>{c.text}</p>);
}

Cas d'usage

Consommer côté client une Promise créée par un Server Component (streaming des données), ou lire un Context sous condition. En React 19.3 (9 septembre 2026), use(browser()) permet aussi de rendre un composant uniquement dans le navigateur.

Anti-pattern

Créer la Promise dans le rendu du composant client (nouvelle Promise à chaque rendu = boucle de suspension) : elle doit venir d'un Server Component, d'un cache ou d'un loader.

Termes liés

#hooks#react19#interview

En entretien

Explique-moi ce que fait le hook use().
C'est une API stable depuis React 19 (5 décembre 2024) qui lit une Promise ou un Context directement pendant le rendu, et contrairement aux hooks classiques, elle peut être appelée dans une condition ou une boucle. Sur une Promise, le composant suspend jusqu'à la résolution ; sur un Context, elle remplace useContext.
Quel est le piège classique avec use() sur une Promise ?
Créer la Promise dans le rendu du composant client, ce qui donne une nouvelle Promise à chaque rendu et une boucle de suspension. Elle doit venir d'un Server Component, d'un cache ou d'un loader.

Dans l'actu

09/09 React 19.3 ajoute aussi `browser()` (`use(browser())` suspend au serveur pour marquer une zone navigateur uniquement), le support de Trusted Types contre le XSS, le rendu direct d'un Context dans les Server Components et des Transitions rendues indépendamment ; aucun breaking change annoncé. Bilan septembre 2026 →

Sources

Fiche mise à jour le 2026-09-27