Een custom store bouwen met useSyncExternalStore

Een aangepaste store heeft drie dingen nodig: enige status, een subscribe-methode om listeners te registreren en een getSnapshot-methode om de huidige status te lezen. Dat is het volledige contract dat useSyncExternalStore verwacht.

Door de store zo klein te houden blijft deze frameworkonafhankelijk, zodat je dezelfde store binnen en buiten React kunt gebruiken.

Een createStore-fabriek neemt een beginwaarde aan en retourneert een object met getSnapshot, subscribe en een update-methode. Intern bewaart de fabriek de huidige status en een verzameling listener-callbacks.

Met dit fabrieks patroon kun je meerdere onafhankelijke stores opzetten met één herbruikbare functie.

Wanneer update de status wijzigt, stelt deze de nieuwe waarde in en roept daarna elke geregistreerde listener aan. Die listeners zijn de callbacks die React via subscribe heeft aangeleverd.

Door ze aan te roepen laat je React weten dat de store is gewijzigd. React leest getSnapshot dan opnieuw en rendert alle componenten die uit de store lezen opnieuw.

Een component leest uit de store door useSyncExternalStore aan te roepen met de subscribe- en getSnapshot-methoden van de store. De hook retourneert de huidige waarde en rendert het component opnieuw wanneer die verandert.

Je kunt dit verpakken in een aangepaste hook zoals useStore, zodat componenten één functie aanroepen in plaats van telkens zelf de argumenten van de hook te verbinden.

Omdat de store een object op moduleniveau is, deelt elk component dat deze importeert dezelfde status, zonder dat een Context-provider nodig is. Je hoeft geen boomstructuur te omwikkelen en geen props door te geven.

Dit is een belangrijke aantrekkingskracht van externe stores: gedeelde globale status met een eenvoudig model van importeren en gebruiken, in plaats van een providerhiërarchie.

Je kunt meerdere kleine stores maken die elk een deel van de status beheren, in plaats van één monolithische store. Componenten abonneren zich alleen op de statusdelen die ze nodig hebben.

Zo houd je verantwoordelijkheden gescheiden en beperk je nieuwe renders, omdat een wijziging in het ene statusdeel nooit componenten beïnvloedt die uit een ander deel lezen.

Zustand, een populaire minimale statusbibliotheek, is precies volgens dit patroon gebouwd en gebruikt sinds versie 4 intern useSyncExternalStore. De kleine API is in wezen een uitgewerkte createStore met een selectielaag.

Als je dit verband ziet, worden zulke bibliotheken minder mysterieus: het zijn dunne, ergonomische omhulsels rond dezelfde primitive die je zelf kunt bouwen.

Door een selector aan getSnapshot mee te geven die alleen het deel van de status teruggeeft dat een component gebruikt, zorgt u ervoor dat het component alleen opnieuw wordt gerenderd wanneer dat deel verandert.

Hiervoor is een stabiel selectorresultaat nodig. Memoiseer daarom afgeleide waarden om de oneindige lus door nieuwe referenties te voorkomen en updates toch tot het relevante deel te beperken.

Voor foutopsporing kunt u een label aan een store koppelen en updates bijhouden in een logboek, of integratie met browser-DevTools toevoegen zodat u kunt nagaan welke store wanneer is gewijzigd.

Zelfs een eenvoudige consolemelding in update, achter een ontwikkelvlag, helpt u de statusstroom te begrijpen terwijl u de store bouwt.

Omdat de store uit gewone JavaScript bestaat, kunt u de logica rechtstreeks testen: roep update aan en controleer dat getSnapshot de nieuwe waarde teruggeeft, zonder iets te renderen.

U kunt de store ook binnen React testen door een component te renderen dat de store uitleest en te controleren of er na update opnieuw wordt gerenderd. Zo test u zowel de store als de integratie ervan.

Een aangepaste store heeft status, subscribe en getSnapshot nodig. Een createStore-factory plus een update die luisteraars op de hoogte brengt, levert gedeelde globale status op zonder Provider, omdat imports van modules één instantie delen.

Gebruik meerdere stores voor afzonderlijke delen en selectors om opnieuw renderen te beperken, en let daarbij op stabiele referenties. Zustand v4+ is op exact dit patroon gebaseerd en de store in gewone JavaScript is eenvoudig binnen en buiten React te testen.