UseState vs. useReducer em React: escolhendo o gancho de gerenciamento de estado certo

Se você deseja conseguir um trabalho de desenvolvimento da Web, terá mais chances de sucesso se aprender a biblioteca React JavaScript. React é uma das bibliotecas mais usadas na indústria. E um dos recursos mais interessantes da biblioteca React é o conceito de ganchos.

Hooks são simplesmente funções JavaScript que isolam e permitem que você reutilize a lógica em um aplicativo React. Para gerenciamento de estado, existem dois ganchos principais disponíveis para você - o useState gancho e o useReducer gancho.

Visão geral do gancho useState

O useState hook é a maneira mais comum de lidar com o estado no React. A sintaxe abaixo ilustra como usar este hook em sua aplicação:

const [estado, setState] = useState (initialStateValue);

No bloco de código acima, o estado A variável mantém os dados na memória entre as renderizações. E setState é a função "setter" que manipula o estado variável.

O useState hook retorna um array com exatamente dois elementos. Ele também aceita um valor inicial para a variável de estado.

Por exemplo, se você quiser definir uma variável de estado que represente a idade do usuário, com valor inicial de 17, você faria assim:

const [userAge, setUserAge] = useState(17);

O setUserAge função é responsável por modificar o idade do usuário Estado variável.

setUserAge(19);

É importante observar que atualizar o estado, acionar uma nova renderização de componente e atualizar uma variável de estado incorretamente pode resultar em um loop infinito que pode interromper seu código.

No React, não é aconselhável modificar o estado diretamente (como mostrado no bloco de código abaixo), porque as alterações nas variáveis ​​não-estado não persistem entre as renderizações do componente.

idade do usuário = 19;

O estado é local para o componente que o define. Se você tiver os mesmos componentes renderizados na tela várias vezes, cada componente terá seu próprio estado independente.

funçãoAplicativo(){
retornar (




 </div>
 )
}

No bloco de código acima, há dois Trocar componentes, mas cada componente lida com seu próprio estado e não depende do outro componente, a menos que um componente compartilhe seu estado com o outro componente.

React lida com atualizações de estado por lotes. Isso significa que quando você chama a função setter de uma variável de estado, a variável de estado não é atualizada até a próxima renderização.

Visão geral do gancho useReducer

useReducer é um hook do React que pode ser útil sempre que você quiser lidar com vários estados relacionados ao mesmo tempo. A sintaxe para useReducer parece algo assim:

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

Comparado com useState, em useReducer, existe um estado variável e um Despacho função que envia ações para o redutor função que lida com cargas úteis e atualiza o estado.

Por exemplo, digamos que você esteja criando um aplicativo de contador simples com botões que podem redefinir o contador, aumentar o valor do contador ou diminuir o valor do contador. Usando useState seu código ficará mais ou menos assim:

funçãoContador(){
const [count, setCount] = useState(0);
retornar(


 A contagem é: {count}


 setCount (contagem + 1)}>Aumentar contagem</button>
 setCont(0)}>Reiniciar</button>
 setCount (contagem - 1)}>Diminuir contagem</button>
 </div>
 </div>
 )
}

A implementação acima funciona perfeitamente. Mas você também pode obter os mesmos resultados com a ajuda do useReducer gancho.

Este exemplo destina-se simplesmente a demonstrar como o useReducer gancho funciona. Em uma aplicação do mundo real, useReducer é um exagero para este cenário.

useReducer torna mais fácil lidar com estados relacionados e lógica complexa com base no tipo passou no despachado Ação objeto.

Por exemplo, a função dispatch poderia enviar um Ação objeto que se parece com isto:

{tipo:"Tipo de acão", carga útil:estado * 2}

Primeiro importe o useReducer gancho, em seguida, defina o redutor função com os parâmetros: estado e o desestruturado Ação objeto.

importar {useReducer} de"reagir";
funçãoredutor(estado, {tipo, carga útil}) {
se (tipo 'contarAumentar') {
retornar carga útil;
 } outrose (tipo 'contarDiminuir') {
retornar carga útil;
 } outrose (tipo 'countReset') {
retornar carga útil;
 } outro {
retornar estado;
 }
}

Depois de definir o redutor função, você pode construir o Contador componente com o useReducer gancho.

funçãoContador() {
const [count, dispatch] = useReducer (redutor, 0);
retornar (


 A contagem é: {count}


 Despacho({ tipo: 'contarAumentar', carga útil: conta + 1 })}>
 Aumentar contagem
 </button>
 Despacho({ tipo: 'countReset', carga útil: 0 })}>
 Redefinir contagem
 </button>
 Despacho({ tipo: 'contarDiminuir', carga útil: contar - 1 })}>
 Aumentar contagem
 </button>
 </div>
 </div>
 );
}

No bloco de código acima, o primeiro botão despacha uma ação do tipo contagemAumentar com uma carga de contar + 1. Esta ação é responsável por incrementar o valor da contagem.

O segundo botão despacha uma ação do tipo contagemRedefinir com uma carga de 0 que redefine o valor de contagem de volta para 0.

O terceiro botão despacha uma ação do tipo contagemDiminuir com uma carga de contagem - 1 que diminui o valor de contagem em 1.

Escolhendo entre os ganchos useState e useReducer

Agora que você entendeu como usar useState e useReducer ganchos, é importante saber quando usar o certo.

Se o seu estado não requer lógica complexa, obviamente usando useReducer pode ser um exagero.

Se o seu estado é tudo menos Primitivos JavaScript como números, strings e valores booleanos, você deve usar o useState gancho. E se o tipo de estado for um objeto ou uma matriz, você deve considerar o uso useReducer em vez de.

À medida que seu aplicativo cresce em complexidade, torna-se difícil lidar com o estado apenas com o useState e useReducer ganchos.

Isso é quando você pode usar bibliotecas externas como Redux, Jotai e Zustand. Essas bibliotecas facilitam a manipulação de alterações de estado em vários componentes.

Facilitando o gerenciamento de estado com bibliotecas JavaScript

Bibliotecas como React, Vue e Svelte têm suas próprias maneiras de lidar com o estado. Lidar com o gerenciamento de estado por conta própria com o JavaScript vanilla é definitivamente algo que você pode tentar, mas é muito mais fácil e conveniente usar uma biblioteca JavaScript testada em batalha.

Se você está construindo um aplicativo complexo usando o React, onde precisa gerenciar vários componentes, o Redux pode ser a melhor escolha para você.