Synkronisere tilstand med localStorage

Det er lett å først lese localStorage ett sted og skrive til det et annet sted, men disse delene kan komme i utakt. Tilstandsoppdateringer som glemmer å lagre, eller lagrede verdier som ikke gjenspeiles i tilstanden, fører til feil.

Du trenger én sannhetskilde som holder React-tilstanden og lagringen synkronisert.

Den ryddige løsningen er en useLocalStorage-hook som pakker inn useState og lagrer endringer automatisk. Den returnerer en verdi og en setter, akkurat som useState.

Den som bruker hooken, bruker den akkurat som vanlig tilstand, men får varig lagring uten ekstra arbeid.

Det å lese localStorage er synkront arbeid, så du bør ikke gjøre det ved hver gjengivelse. Send en funksjon til useState, altså den late initialiseringsfunksjonen, slik at lesingen bare skjer én gang ved montering.

I denne funksjonen tolker du den lagrede verdien eller returnerer standardverdien som ble oppgitt.

Hvis du beregner starttilstanden direkte som et argument, kjøres uttrykket ved hver gjengivelse, selv om resultatet ignoreres etter den første. Med en funksjon kaller React den bare én gang.

For localStorage-lesinger unngår dette gjentatt synkront arbeid på hovedtråden ved hver gjengivelse.

For å lagre oppdateringer legger du til en useEffect som kjører hver gang verdien endres, og kaller localStorage.setItem(key, JSON.stringify(value)).

Når du legger verdien i avhengighetsarrayet, skriver hver tilstandsendring automatisk gjennom til lagringen.

Når du setter en verdi basert på den forrige verdien, bruker du den funksjonelle formen setValue(prev => prev + 1). Dette unngår utdaterte closures der en gammel, innfanget verdi ville blitt skrevet.

Det er særlig viktig i hendelsesbehandlere og effekter som kan fange et utdatert øyeblikksbilde.

getItem returnerer null når nøkkelen ikke finnes. Initialiseringsfunksjonen må oppdage dette og bruke standardverdien i stedet for å forsøke å tolke null.

En kontroll som stored != null ? JSON.parse(stored) : defaultValue håndterer det første besøket på en god måte.

I TypeScript gjør du hooken generisk: function useLocalStorage<T>(key: string, initial: T). Dette bevarer verditypen, slik at den som bruker hooken, får full typesikkerhet.

Den returnerte tuplen er typet som [T, Dispatch<SetStateAction<T>>], i samsvar med useState.

Over tid endres datastrukturen, og gamle lagrede verdier kan ødelegge ny kode. Lagre en versjonsnøkkel sammen med dataene, slik at du kan oppdage utdaterte formater.

Du kan for eksempel lagre { version: 2, data } og sammenligne versjonen ved lesing.

Når den lagrede versjonen ikke samsvarer med den gjeldende versjonen, må du forkaste eller migrere den gamle verdien i stedet for å stole på den. Den enkleste strategien er å fjerne den utdaterte oppføringen og falle tilbake til standardverdiene.

Dette hindrer krasj på grunn av data som ble skrevet av en eldre versjon av appen.

En komplett useLocalStorage kombinerer en lat initialiseringsfunksjon som leser og tolker trygt, en setter som støtter funksjonelle oppdateringer, og en useEffect som skriver tilbake med versjonering.

Resultatet er en direkte erstatning for useState som overlever sideoppdateringer.

Du har lært å lage en useLocalStorage-hook med en lat initialiseringsfunksjon, lagre endringer via useEffect, bruke funksjonelle oppdateringer for å unngå utdaterte closures og håndtere nullverdier.

Du har også sett hvordan generics i TypeScript og versjonering kan brukes til å fjerne utdaterte data på en trygg måte.