Introdus în React 18 pentru a sprijini arhitectura de randare concurentă (Concurrent Rendering), hook-ul useSyncExternalStore este instrumentul recomandat oficial pentru conectarea componentelor React la depozite de stare externe (cum ar fi biblioteci globale de tip Zustand, Redux sau stări native ale browserului precum istoricul de navigare și starea conexiunii online).
Problema majoră pe care o rezolvă este tearing-ul vizual: situația în care o stare externă se modifică asincron în timp ce React întrerupe și reia randarea pe bucăți, ceea ce ar putea determina două componente de pe același ecran să afișeze valori diferite pentru aceeași variabilă.
Exemplu: Monitorizarea stării conexiunii la internet (navigator.onLine)
import { useSyncExternalStore } from 'react';
// 1. Funcția de abonare la evenimentele globale ale ferestrei:
function aboneazaConexiune(callback) {
window.addEventListener('online', callback);
window.addEventListener('offline', callback);
return () => {
window.removeEventListener('online', callback);
window.removeEventListener('offline', callback);
};
}
// 2. Funcția de citire sincronă a instantaneului curent pe client:
function citesteStareConexiune() {
return navigator.onLine;
}
// 3. Funcția pentru Server-Side Rendering (implicit presupunem online):
function citesteServerSnapshot() {
return true;
}
export function IndicatorConexiune() {
const esteOnline = useSyncExternalStore(
aboneazaConexiune,
citesteStareConexiune,
citesteServerSnapshot
);
return (
<div className={`alerta ${esteOnline ? 'alerta-verde' : 'alerta-rosie'}`}>
{esteOnline ? 'Conexiune activă la server.' : 'Atenție: Ai pierdut conexiunea la internet!'}
</div>
);
}
Regulă critică de imutabilitate: Funcția
getSnapshot trebuie să returneze o valoare primitivă imutabilă (număr, șir, boolean) sau o referință neschimbată de obiect dacă datele din store nu s-au modificat. Returnarea unui obiect nou creat la fiecare apel va arunca React într-o buclă infinită de randare.
Întrebări & Exemple de Cod:
Hook-ul useSyncExternalStore: Subscrierea la Store-uri Externe fără TearingAi o nelămurire despre utilizarea comenzii
Hook-ul useSyncExternalStore: Subscrierea la Store-uri Externe fără Tearingsau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.