useSyncExternalStore

Définition

Hook pour s'abonner a un store externe (non-React) de manière compatible avec le rendu concurrent, évitant les tearing (desynchro visuelle).

Analogie

Comme un écran d'aéroport synchronise : tous les passagers voient les mêmes horaires, pas de version périmée.

Exemple de code

const width = useSyncExternalStore(
  (cb) => { window.addEventListener('resize', cb); return () => window.removeEventListener('resize', cb); },
  () => window.innerWidth,
  () => 1024 // server snapshot
);

Cas d'usage

Intégration avec des stores externes (Zustand, Redux interne) ou des API navigateur (resize, online).

Termes liés