State synchroniseren met localStorage

Een eerste ingeving is om localStorage op één plek uit te lezen en op een andere plek te schrijven, maar die twee kunnen uit elkaar lopen. Statusupdates die vergeten op te slaan, of opgeslagen waarden die niet in de status terugkomen, leiden tot fouten.

Je wilt één bron van waarheid die de React-status en opslag synchroon houdt.

De nette oplossing is een useLocalStorage-hook die useState omwikkelt en wijzigingen automatisch opslaat. De hook geeft net als useState een waarde en setter terug.

Gebruikers van de hook gebruiken deze precies zoals normale status, maar krijgen persistentie zonder extra werk.

Het uitlezen van localStorage is synchroon werk, dus je moet dit niet bij elke render doen. Geef een functie door aan useState, de luie initializer, zodat het uitlezen maar één keer bij het mounten plaatsvindt.

Binnen die functie parseer je de opgeslagen waarde of geef je de opgegeven standaardwaarde terug.

Als je de beginstatus rechtstreeks als argument berekent, wordt die uitdrukking bij elke render uitgevoerd, ook al wordt de waarde na de eerste render genegeerd. Met een functie roept React deze maar één keer aan.

Voor het uitlezen van localStorage voorkomt dit bij elke render herhaald synchroon werk op de hoofdthread.

Voeg om wijzigingen op te slaan een useEffect toe die wordt uitgevoerd wanneer de waarde verandert en localStorage.setItem(key, JSON.stringify(value)) aanroept.

Als je de waarde in de afhankelijkheidsarray zet, wordt elke statuswijziging automatisch naar de opslag geschreven.

Gebruik bij het instellen van een waarde op basis van de vorige waarde de functionele vorm setValue(prev => prev + 1). Zo voorkom je verouderde closures waarbij een eerder vastgelegde waarde zou worden geschreven.

Dit is vooral belangrijk binnen gebeurtenisafhandelaars en effecten die mogelijk een verouderde momentopname vastleggen.

getItem geeft null terug als de sleutel niet bestaat. Je initialisatiefunctie moet dit detecteren en terugvallen op de standaardwaarde in plaats van null te proberen te parsen.

Een controle zoals stored != null ? JSON.parse(stored) : defaultValue handelt het eerste bezoek netjes af.

In TypeScript maak je de hook generiek: function useLocalStorage<T>(key: string, initial: T). Hierdoor blijft het type van de waarde behouden en krijgen gebruikers volledige typeveiligheid.

De teruggegeven tupel heeft het type [T, Dispatch<SetStateAction<T>>], net als bij useState.

Na verloop van tijd verandert je gegevensstructuur en kunnen oude opgeslagen waarden nieuwe code breken. Sla naast de gegevens een versiesleutel op, zodat je verouderde indelingen kunt detecteren.

Sla bijvoorbeeld { version: 2, data } op en vergelijk de versie bij het uitlezen.

Als de opgeslagen versie niet overeenkomt met de huidige versie, verwijder je de oude waarde of zet je deze om in plaats van erop te vertrouwen. De eenvoudigste strategie is om de verouderde invoer te verwijderen en terug te vallen op de standaardwaarden.

Zo voorkom je fouten door gegevens die door een oudere versie van je app zijn geschreven.

Een complete useLocalStorage-hook combineert een luie initialisatiefunctie die gegevens veilig uitleest en parseert, een setter die functionele updates ondersteunt en een useEffect die de gegevens met versiebeheer naar de opslag schrijft.

Het resultaat is een directe vervanging voor useState die vernieuwingen overleeft.

Je hebt geleerd hoe je een useLocalStorage-hook bouwt met een luie initialisatiefunctie, wijzigingen via useEffect opslaat, functionele updates gebruikt om verouderde closures te voorkomen en null-waarden afhandelt.

Ook heb je generieke typen in TypeScript en versiebeheer gezien om verouderde gegevens veilig te verwijderen.