Synchroniser l’état avec localStorage

Une première intuition consiste à lire localStorage à un endroit et à l'écrire à un autre, mais ces deux opérations peuvent diverger. Les mises à jour d'état qui oublient la persistance, ou les valeurs persistées qui ne sont pas reflétées dans l'état, entraînent des bogues.

Vous avez besoin d'une source unique de vérité qui maintient l'état React et le stockage en synchronisation.

La solution claire consiste à créer une fonction useLocalStorage qui encapsule useState et persiste automatiquement les modifications. Elle renvoie une valeur et une fonction de mise à jour, comme useState.

Les composants qui l'utilisent fonctionnent exactement comme avec un état ordinaire, tout en bénéficiant automatiquement de la persistance.

La lecture de localStorage est une opération synchrone ; vous ne devez donc pas l'effectuer à chaque rendu. Transmettez une fonction à useState, l'initialiseur différé, afin que la lecture ne s'effectue qu'une seule fois lors du montage.

Dans cette fonction, analysez la valeur stockée ou renvoyez la valeur par défaut fournie.

Si vous calculez l'état initial directement comme argument, cette expression est évaluée à chaque rendu, même si son résultat est ignoré après le premier. Avec une fonction, React ne l'appelle qu'une seule fois.

Pour les lectures de localStorage, cela évite de répéter une opération synchrone sur le fil d'exécution principal à chaque rendu.

Pour persister les mises à jour, ajoutez un useEffect qui s'exécute chaque fois que la valeur change et appelle localStorage.setItem(key, JSON.stringify(value)).

Placer la valeur dans le tableau de dépendances signifie que chaque changement d'état est automatiquement écrit dans le stockage.

Lorsque la nouvelle valeur dépend de la précédente, utilisez la forme fonctionnelle setValue(prev => prev + 1). Cela évite les fermetures obsolètes dans lesquelles une ancienne valeur capturée serait écrite.

C'est particulièrement important dans les gestionnaires d'événements et les effets susceptibles de capturer un instantané obsolète.

getItem renvoie null lorsque la clé n'existe pas. Votre initialiseur doit le détecter et utiliser la valeur par défaut au lieu d'essayer d'analyser null.

Une vérification comme stored != null ? JSON.parse(stored) : defaultValue gère correctement la première consultation.

Dans TypeScript, rendez la fonction générique : function useLocalStorage<T>(key: string, initial: T). Le type de la valeur est ainsi conservé, ce qui assure une sécurité de typage complète aux utilisateurs.

Le n-uplet renvoyé est typé comme [T, Dispatch<SetStateAction<T>>], comme avec useState.

Au fil du temps, la structure de vos données évolue et les anciennes valeurs stockées peuvent empêcher le nouveau code de fonctionner. Stockez une clé de version avec les données afin de détecter les anciens formats.

Par exemple, enregistrez { version: 2, data } et comparez la version lors de la lecture.

Lorsque la version stockée ne correspond pas à la version actuelle, supprimez ou migrez l'ancienne valeur au lieu de lui faire confiance. La stratégie la plus simple consiste à supprimer l'entrée obsolète et à utiliser les valeurs par défaut.

Cela empêche les plantages provoqués par des données écrites par une ancienne version de votre application.

Une fonction useLocalStorage complète associe un initialiseur différé qui lit et analyse les données de manière sûre, une fonction de mise à jour prenant en charge les mises à jour fonctionnelles et un useEffect qui écrit systématiquement dans le stockage avec un versionnement.

Le résultat est un remplacement direct de useState qui résiste aux rechargements.

Testez votre compréhension de l'initialisation de l'état.

Vous avez appris à créer une fonction useLocalStorage avec un initialiseur différé, à persister les modifications via useEffect, à utiliser les mises à jour fonctionnelles pour éviter les fermetures obsolètes et à gérer les valeurs nulles.

Vous avez également découvert les génériques TypeScript et le versionnement pour supprimer les données obsolètes en toute sécurité.