Sincronización del estado con localStorage

Una primera reacción es leer localStorage en un lugar y escribir en otro, pero ambos pueden desincronizarse. Las actualizaciones de estado que olvidan persistir los datos, o los valores persistidos que no se reflejan en el estado, provocan errores.

Necesita una única fuente de verdad que mantenga el estado de React y el almacenamiento perfectamente sincronizados.

La solución más clara es un hook useLocalStorage que envuelve useState y persiste los cambios automáticamente. Devuelve un valor y un setter, igual que useState.

Los componentes consumidores lo utilizan exactamente igual que el estado normal, pero obtienen persistencia automáticamente.

Leer localStorage es una operación síncrona, por lo que no debe hacerlo en cada renderizado. Pase una función a useState, el inicializador diferido, para que la lectura solo se realice una vez al montarse.

Dentro de esa función, analice el valor almacenado o devuelva el valor predeterminado proporcionado.

Si calcula el estado inicial directamente como argumento, esa expresión se ejecuta en cada renderizado, aunque se ignore después del primero. Con una función, React la llama una sola vez.

En las lecturas de localStorage, esto evita trabajo síncrono repetido en el hilo principal durante cada renderizado.

Para persistir las actualizaciones, añada un useEffect que se ejecute cada vez que cambie el valor y llame a localStorage.setItem(key, JSON.stringify(value)).

Incluir el valor en el array de dependencias hace que cada cambio de estado se escriba automáticamente en el almacenamiento.

Al establecer un valor basándose en el anterior, use la forma funcional setValue(prev => prev + 1). Esto evita los cierres obsoletos, en los que se escribiría un valor antiguo capturado.

Es especialmente importante dentro de controladores de eventos y efectos que puedan capturar una instantánea desactualizada.

getItem devuelve null cuando no existe la clave. El inicializador debe detectarlo y recurrir al valor predeterminado, en lugar de intentar analizar null.

Una comprobación como stored != null ? JSON.parse(stored) : defaultValue gestiona correctamente la primera visita.

En TypeScript, convierta el hook en genérico: function useLocalStorage<T>(key: string, initial: T). Esto conserva el tipo del valor para que los consumidores obtengan toda la seguridad de tipos.

La tupla devuelta tiene el tipo [T, Dispatch<SetStateAction<T>>], igual que useState.

Con el tiempo, la forma de los datos cambia y los valores almacenados antiguos pueden romper el código nuevo. Guarde una clave de versión junto con los datos para detectar formatos obsoletos.

Por ejemplo, guarde { version: 2, data } y compare la versión al leer.

Cuando la versión almacenada no coincide con la actual, descarte o migre el valor antiguo en lugar de confiar en él. La estrategia más sencilla consiste en eliminar la entrada obsoleta y recurrir a los valores predeterminados.

Esto evita errores causados por datos escritos por una versión anterior de su aplicación.

Un useLocalStorage completo combina un inicializador diferido que lee y analiza los datos de forma segura, un setter que admite actualizaciones funcionales y un useEffect que escribe los cambios con control de versiones.

El resultado es un reemplazo directo de useState que sobrevive a las recargas.

Compruebe su comprensión de la inicialización del estado.

Ha aprendido a crear un hook useLocalStorage con un inicializador diferido, persistir los cambios mediante useEffect, usar actualizaciones funcionales para evitar cierres obsoletos y gestionar valores nulos.

También ha visto los genéricos de TypeScript y el versionado para eliminar datos obsoletos de forma segura.