Como desenvolver um hook que mantém estados entre sessões no React

Criando um hook para persistência de estado

No desenvolvimento de aplicações em React, muitas vezes precisamos manter o estado de um componente mesmo quando o usuário navega entre diferentes páginas ou recarrega a aplicação. Para isso, podemos criar um hook personalizado que utiliza o localStorage do navegador para armazenar e recuperar valores. Neste tutorial, vamos explorar como fazer isso de forma prática.

O que é um Hook?

Hooks são funções que permitem que você "ligue" o estado e outras funcionalidades do React a componentes funcionais. O useState e o useEffect são exemplos de hooks que fornecem funcionalidade essencial para componentes. Vamos criar um hook que será responsável por gerenciar a persistência de estados.

Implementando o Hook

Primeiro, vamos criar um arquivo chamado usePersistedState.js. Nesse arquivo, implementaremos o nosso hook.

import { useState, useEffect } from 'react';

const usePersistedState = (key, initialValue) => {
    const [state, setState] = useState(() => {
        const storedValue = localStorage.getItem(key);
        return storedValue ? JSON.parse(storedValue) : initialValue;
    });

    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(state));
    }, [key, state]);

    return [state, setState];
};

export default usePersistedState;

Neste código, estamos criando um hook chamado usePersistedState. Ele recebe dois parâmetros: key, que é a chave que usaremos no localStorage, e initialValue, que é o valor inicial do estado.

O hook utiliza o useState para inicializar o estado. Ao chamar useState, verificamos se já existe um valor em localStorage com a chave especificada. Se existir, usamos esse valor; caso contrário, usamos initialValue.

A função useEffect é utilizada para atualizar o localStorage sempre que o estado mudar, garantindo que a persistência sempre ocorra.

Usando o Hook em um Componente

Agora que temos nosso hook, vamos utilizá-lo em um componente funcional. Vamos criar um simples formulário que armazena o nome do usuário:

import React from 'react';
import usePersistedState from './usePersistedState';

const UserForm = () => {
    const [name, setName] = usePersistedState('userName', '');

    const handleChange = (event) => {
        setName(event.target.value);
    };

    return (
        <div>
            <h2>Formulário do Usuário</h2>
            <input type="text" value={name} onChange={handleChange} placeholder="Digite seu nome" />
            <p>Olá, {name}!</p>
        </div>
    );
};

export default UserForm;

No componente UserForm, usamos o hook usePersistedState para armazenar o nome do usuário. Ao digitar no campo de entrada, o nome será salvo no localStorage e persistirá mesmo se a página for recarregada.

Conclusão

Criar hooks personalizados como o usePersistedState é uma ótima maneira de gerenciar estados em aplicações React de forma eficaz. Isso não apenas melhora a experiência do usuário, mas também simplifica a lógica do componente. Experimente implementar esse hook em seus projetos e veja como ele pode otimizar a persistência de dados.

Considerações Finais

Persistir estados é uma competência essencial em React. Ao entender como criar e usar hooks personalizados, você se torna mais eficaz no desenvolvimento de aplicações que oferecem uma experiência de usuário aprimorada. Não hesite em explorar outros usos para localStorage e outros métodos de persistência para enriquecer ainda mais suas aplicações.

Entenda a Importância da Persistência de Estado em Aplicações React

A persistência de estado é uma técnica valiosa no desenvolvimento de aplicações web. Isso permite que os dados do usuário sejam mantidos entre diferentes sessões, melhorando a experiência do usuário. No React, podemos facilmente implementar essa funcionalidade através de hooks personalizados, que são uma forma poderosa de reutilizar lógica de estado. Com o uso adequado, hooks como o usePersistedState podem tornar seu código mais limpo e eficiente, além de oferecer uma experiência mais fluida para os usuários da sua aplicação.

Algumas aplicações:

• Armazenar preferências do usuário, como temas ou configurações de layout.
• Manter dados de formulários entre recarregamentos.
• Salvar conteúdo temporário, como listas de tarefas.
• Gerenciar autenticação do usuário de forma prática.

Dicas para quem está começando

1. Comece entendendo os hooks básicos do React, como useState e useEffect.
2. Pratique a criação de hooks personalizados com diferentes funcionalidades.
3. Teste seu hook em diferentes cenários para garantir que funciona como esperado.
4. Leia a documentação oficial do React para se aprofundar nas melhores práticas.
5. Experimente integrar o seu hook com APIs externas para armazenar dados de forma mais dinâmica.

Compartilhe este tutorial