browser() — rendu navigateur uniquement

Définition

Nouvelle API de react-dom dans React 19.3 (9 septembre 2026). Appelée via use(browser(reason)), elle fait suspendre le composant pendant le rendu serveur (le fallback Suspense part dans le HTML) et ne fait rien dans le navigateur. C'est la réponse officielle au problème des composants dépendant de window ou localStorage en SSR, sans hack typeof window ni useEffect de montage.

Analogie

Un panneau « ouverture à l'arrivée du personnel » : le serveur laisse la vitrine vide, le navigateur ouvre la boutique.

Exemple de code

'use client';
import { use, useState, Suspense } from 'react';
import { browser } from 'react-dom';

function SavedDraft() {
  use(browser('Le brouillon est dans localStorage.'));
  const [draft, setDraft] = useState(() => localStorage.getItem('draft') ?? '');
  return <textarea value={draft} onChange={e => setDraft(e.target.value)} />;
}

export default () => (
  <Suspense fallback={<p>Chargement du brouillon…</p>}>
    <SavedDraft />
  </Suspense>
);

Cas d'usage

Widgets fuseau horaire, thème stocké côté client, éditeurs riches non SSR-compatibles.

Anti-pattern

Termes liés

Sources

• react.dev/blog/2026/09/09/react-19-3
• react.dev/reference/react-dom/browser