Sincronizando o estado com localStorage

O primeiro impulso é ler o localStorage em um lugar e gravá-lo em outro, mas essas partes podem se dessincronizar. Atualizações de estado que esquecem de persistir os dados, ou valores persistidos que não são refletidos no estado, geram erros.

Você precisa de uma única fonte de verdade que mantenha o estado do React e o armazenamento sincronizados.

A solução mais limpa é um gancho useLocalStorage que encapsula useState e persiste as alterações automaticamente. Ele retorna um valor e uma função de atualização, assim como useState.

Quem o utiliza trabalha exatamente como com um estado comum, mas obtém persistência automaticamente.

Ler o localStorage é uma operação síncrona, portanto você não deve fazer isso em toda renderização. Passe uma função para useState, o inicializador tardio, para que a leitura aconteça apenas uma vez na montagem.

Dentro dessa função, analise o valor armazenado ou retorne o valor padrão fornecido.

Se você calcular o estado inicial diretamente como um argumento, essa expressão será executada em toda renderização, embora seja ignorada depois da primeira. Com uma função, o React a chama apenas uma vez.

Para leituras do localStorage, isso evita trabalho síncrono repetido na linha de execução principal a cada renderização.

Para persistir as atualizações, adicione um useEffect que seja executado sempre que o valor mudar e chame localStorage.setItem(key, JSON.stringify(value)).

Colocar o valor na lista de dependências faz com que toda alteração de estado seja gravada automaticamente no armazenamento.

Ao definir um valor com base no valor anterior, use a forma funcional setValue(prev => prev + 1). Isso evita capturas obsoletas, nas quais um valor antigo capturado seria gravado.

Isso é especialmente importante dentro de manipuladores de eventos e efeitos que podem capturar um estado desatualizado.

getItem retorna null quando a chave não existe. Seu inicializador deve detectar isso e recorrer ao valor padrão, em vez de tentar analisar null.

Uma verificação como stored != null ? JSON.parse(stored) : defaultValue lida adequadamente com a primeira visita.

Em TypeScript, você torna o gancho genérico: function useLocalStorage<T>(key: string, initial: T). Isso preserva o tipo do valor para que quem o utiliza tenha segurança de tipos completa.

A tupla retornada é tipada como [T, Dispatch<SetStateAction<T>>], correspondendo a useState.

Com o tempo, a estrutura dos seus dados muda, e valores armazenados antigos podem quebrar o código novo. Armazene uma chave de versão junto com os dados para detectar formatos desatualizados.

Por exemplo, salve { version: 2, data } e compare a versão durante a leitura.

Quando a versão armazenada não corresponder à versão atual, descarte ou migre o valor antigo em vez de confiar nele. A estratégia mais simples é remover a entrada desatualizada e recorrer aos valores padrão.

Isso evita falhas causadas por dados gravados por uma versão mais antiga do seu aplicativo.

Um useLocalStorage completo combina um inicializador tardio que lê e analisa os dados com segurança, uma função de atualização que aceita atualizações funcionais e um useEffect que grava os dados com versionamento.

O resultado é um substituto direto para useState que permanece após recarregamentos.

Teste sua compreensão da inicialização do estado.

Você aprendeu a criar um gancho useLocalStorage com um inicializador tardio, persistir alterações por meio de useEffect, usar atualizações funcionais para evitar capturas obsoletas e lidar com valores nulos.

Você também conheceu os genéricos do TypeScript e o versionamento para remover dados desatualizados com segurança.