Het probleem met subscriptions op externe stores

Een externe statusopslag is elke statusbron die buiten de React-boom leeft, zoals een Redux-opslag, een browser-API zoals matchMedia of een gewoon object op moduleniveau met een eigen mechanisme om je erop te abonneren.

React beheert deze status niet, dus moet het zich abonneren op wijzigingen en momentopnamen lezen om componenten synchroon te houden met wat de opslag momenteel bevat.

Een gebruikelijke aanpak leest de waarde van de statusopslag in useState en gebruikt daarna useEffect om zich te abonneren en setState aan te roepen telkens wanneer de opslag verandert. Op het eerste gezicht lijkt dit de component actueel te houden.

Dit werkt voor eenvoudige synchrone weergave, maar heeft een subtiele tekortkoming die zichtbaar wordt zodra React gelijktijdig rendert en werk halverwege kan pauzeren of opnieuw starten.

Tearing ontstaat wanneer verschillende delen van de gebruikersinterface tijdens één renderdoorgang verschillende waarden van dezelfde statusopslag weergeven. Gelijktijdig renderen kan werk onderbreken en hervatten, terwijl de opslag intussen kan veranderen.

Het resultaat is een inconsistent scherm waarop de ene component de oude waarde toont en de andere de nieuwe, een inconsistentie die vóór functies voor gelijktijdig renderen praktisch onmogelijk was.

Stel je voor dat veel componenten een thema-opslag lezen terwijl React gelijktijdig rendert. Als de gebruiker halverwege de donkere modus inschakelt, tonen de componenten die vóór de omschakeling zijn gerenderd het lichte thema en die erna het donkere.

Je krijgt één frame lang een halflicht en halfdonker scherm, omdat de waarde in de opslag tijdens een render veranderde die React niet als één atomaire bewerking behandelde.

Effecten worden uitgevoerd nadat de render is doorgevoerd, dus een op useEffect gebaseerde abonnering kan niet garanderen dat de tijdens het renderen gelezen waarde bij het doorvoeren overeenkomt met de statusopslag. De abonnering reageert te laat om een inconsistente weergave te voorkomen.

Tegen de tijd dat het effect opnieuw is geabonneerd en de status heeft bijgewerkt, kan het inconsistente frame al aan de gebruiker zijn getoond.

Een eerdere experimentele API met de naam useMutableSource probeerde gelijktijdig veilig lezen uit externe statusopslag mogelijk te maken, maar de API bleek moeilijk correct te gebruiken en is nooit als stabiel uitgebracht.

Het React-team verving deze door een eenvoudiger, gebruiksvriendelijker mechanisme dat dezelfde consistentiegaranties biedt zonder lastige valkuilen.

useSyncExternalStore is de officiële hook om je op een externe statusopslag te abonneren op een manier die veilig is bij gelijktijdig renderen. De hook stemt af met React, zodat gelezen waarden tijdens een render consistent blijven en componenten geen tearing vertonen.

Het werd het aanbevolen mechanisme voor bibliotheekauteurs die externe status bij gelijktijdig renderen betrouwbaar met React moeten verbinden.

Statusbibliotheken die zich op externe statusopslag abonneren, werden rechtstreeks getroffen, waaronder Redux, MobX en Valtio. Elke bibliotheek moest het nieuwe mechanisme overnemen om veilig te blijven nadat functies voor gelijktijdig renderen beschikbaar kwamen.

Daarom zijn hun React-koppelingen bijgewerkt om intern useSyncExternalStore aan te roepen in plaats van te vertrouwen op het oudere patroon met useState en useEffect.

De hook garandeert dat elk component dat de store tijdens het renderen leest, dezelfde snapshot ziet en een synchrone nieuwe render afdwingt als de store verandert op een manier die anders tot tearing zou leiden.

Deze combinatie van een consistente snapshot en veiligheid bij gelijktijdig renderen is de belangrijkste meerwaarde die de hook biedt ten opzichte van zelfgebouwde abonnementen.

Door useSyncExternalStore te gebruiken blijven je abonnementen correct terwijl React zijn renderingsmodel verder ontwikkelt. Je kiest voor de garanties van het framework in plaats van ze onvolmaakt opnieuw te implementeren.

Dit maakt het de duurzame, aanbevolen manier om elke externe bron van waarheid aan React-componenten te koppelen.

Externe stores leven buiten React, en het naïeve abonnement met useState plus useEffect kan tearing niet voorkomen zodra renderen gelijktijdig gebeurt. Effecten worden te laat uitgevoerd om alle waarden die tijdens één render worden gelezen consistent te houden.

useSyncExternalStore vervangt het niet meer gebruikte useMutableSource en biedt een consistente snapshot met veiligheid bij gelijktijdig renderen. Bibliotheken zoals Redux, MobX en Valtio hebben het overgenomen als toekomstbestendige primitive voor store-abonnementen.