useSyncExternalStore

React 🔴 Senior

Definition

Hook pour s'abonner a un store externe (non-React) de maniere compatible avec le rendu concurrent, evitant les tearing (desynchro visuelle).

Analogie

Comme un ecran d'aeroport synchronise : tous les passagers voient les memes horaires, pas de version perimee.

Exemple de code

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

Cas d'usage

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

Termes lies

#hooks#advanced#react18