Gerenciamento de Estado Simplificado: UseContext e UseReducer em Ação

Nem tudo na vida é useState

Quando falamos em gerenciamento de estado no React, é fácil cair na armadilha de pensar que o useState é a única solução para tudo. Mas calma lá, amigo! Existem outros caminhos.

Todo programador de React.js chega a um momento em que a manipulação de seus estados se torna muito complexa ou aninhada, ou quando é necessário que vários componentes posicionados horizontalmente, ou seja, que não podem ser acessados verticalmente através de componentes pai, sejam acessados via 'props'. Por isso, hoje vamos explorar dois pesos pesados: useContext e useReducer.

Que raios são contextos e reducers?

Vamos desvendar esses conceitos! Um contexto é uma forma de passar dados através da árvore de componentes sem precisar passar props manualmente em cada nível. 

Imagine que você precisa acessar um estado de um tema global (como claro ou escuro) no componente que está construindo, mas ele não pode ser acessado através do componente pai e esse estado deve ser acessado em outros lugares do sistema. O que fazer Jovem padawan? É em uma situação dessas que o contexto pode pode te fornecer uma maneira de acessar um estado geral que não está disponível no props.

Já um reducer é um conceito vindo do Redux, que ajuda a gerenciar estados de forma mais organizada, aplicando ações predefinidas. Ele resume as funções de manipulação de estado em um só lugar. O uso de redutores do React pode melhorar o desempenho reduzindo a quantidade de renderizações desnecessárias.

Usando o useContext e useReducer

Vamos dar uma olhada em como implementar contextos e redutores do React com o useReducer e o useContext, com este você pode acessar valores em qualquer lugar da sua árvore de componentes sem a necessidade de props intermediárias. Por exemplo:

const MyContext = React.createContext();


const MyComponent = () => {

const value = useContext(MyContext);

return <div>{value}</div>;

};

Já com o useReducer, você pode gerenciar estados complexos de forma mais eficiente. Por exemplo:

const initialState = { count: 0 };

function reducer(state, action) {
switch (action.type) {
  case 'increment':
    return { count: state.count + 1 };
  case 'decrement':
    return { count: state.count - 1 };
  default:
    throw new Error();
}
}

Hooks unidos para facilitar o gerenciamento dos seus estados

Agora é que tudo fica ainda mais interessante. Quando combinamos a versatilidade do contexto com a manipulação de estados dos redutores criamos um ecossistema semelhante ao do redux, mas com uma maior praticidade de uso e implementação.

Imagine o useContext como a porta de entrada e o useReducer como o guarda-costas dos seus estados. Veja só:

const MyContext = React.createContext();

const MyComponent = () => {

const [state, dispatch] = useReducer(reducer, initialState);

return (
  <MyContext.Provider value={{ state, dispatch }}>
    <ChildComponent />
  </MyContext.Provider>
);
};

Conclusão

Se quiser mergulhar mais fundo nesse universo do front-end (e back-end também) e ficar por dentro das últimas novidades, acesse meu linkedIn: Eric Santana | LinkedIn. Você também pode ficar por dentro de projetos que existem e ainda vai nascer lá no meu github: efms25 (Eric Santana).

Ilustração de capa: gerada pela Leanardo.ai

Trechos de código e alguns textos: ChatGPT e revisões humanas

Hashtags

#React #FrontEnd #Hooks