Synkronisering af state med localStorage

Den første indskydelse er måske at læse fra localStorage ét sted og skrive til den et andet sted, men de to steder kan komme ud af takt. Tilstandsopdateringer, der glemmer at gemme data, eller gemte værdier, som ikke afspejles i tilstanden, fører til fejl.

Du har brug for én sandhedskilde, der holder React-tilstand og lager synkroniseret.

Den rene løsning er en useLocalStorage-hook, der pakker useState ind og automatisk gemmer ændringer. Den returnerer en værdi og en setter ligesom useState.

Forbrugere bruger den præcis som normal tilstand, men får vedvarende lagring uden ekstra arbejde.

Læsning fra localStorage er synkront arbejde, så du bør ikke udføre det ved hver rendering. Giv en funktion til useState, altså den dovne initialiseringsfunktion, så læsningen kun sker én gang ved montering.

Inde i funktionen parser du den gemte værdi eller returnerer den angivne standardværdi.

Hvis du beregner den oprindelige tilstand direkte som et argument, kører udtrykket ved hver rendering, selv om resultatet ignoreres efter den første. Med en funktion kalder React den kun én gang.

Ved læsning fra localStorage undgår det gentaget synkront arbejde på hovedtråden ved hver rendering.

Hvis du vil gemme opdateringer, skal du tilføje en useEffect, der kører, hver gang værdien ændres, og kalder localStorage.setItem(key, JSON.stringify(value)).

Hvis du placerer værdien i afhængighedsarrayet, skrives alle tilstandsændringer automatisk videre til lageret.

Når du opdaterer ud fra den forrige værdi, skal du bruge den funktionelle form setValue(prev => prev + 1). Det undgår forældede closures, hvor en tidligere indfanget værdi ellers ville blive skrevet.

Det er især vigtigt i hændelseshandlere og effekter, som kan have indfanget et forældet øjebliksbillede.

getItem returnerer null, når nøglen ikke findes. Din initialiseringsfunktion skal registrere dette og bruge standardværdien i stedet for at forsøge at parse null.

En kontrol som stored != null ? JSON.parse(stored) : defaultValue håndterer det første besøg på en robust måde.

I TypeScript gør du hooken generisk: function useLocalStorage<T>(key: string, initial: T). Det bevarer værditypen, så forbrugerne får fuld typesikkerhed.

Den returnerede tupel har typen [T, Dispatch<SetStateAction<T>>], ligesom useState.

Med tiden ændrer din datastruktur sig, og gamle gemte værdier kan få den nye kode til at fejle. Gem en versionsnøgle sammen med dataene, så du kan registrere forældede formater.

Du kan for eksempel gemme { version: 2, data } og sammenligne versionen ved læsning.

Når den gemte version ikke svarer til den aktuelle, skal du kassere eller migrere den gamle værdi i stedet for at stole på den. Den enkleste strategi er at fjerne den forældede post og bruge standardværdierne.

Det forhindrer nedbrud på grund af data, der blev skrevet af en ældre version af din app.

En komplet useLocalStorage kombinerer en doven initialiseringsfunktion, der læser og parser sikkert, en setter, der understøtter funktionelle opdateringer, og en useEffect, der skriver ændringer videre med versionsstyring.

Resultatet er en direkte erstatning for useState, som overlever genindlæsninger.

Du har lært at bygge en useLocalStorage-hook med en doven initialiseringsfunktion, gemme ændringer via useEffect, bruge funktionelle opdateringer for at undgå forældede closures og håndtere null-værdier.

Du har også set TypeScript-generics og versionsstyring, så forældede data kan slettes sikkert.