Uma outra forma de reiniciar estados no React
Tags: javascript, react, programming, braziliandevs
Published: 2023-04-24 13:01:13

No desenvolvimento de aplicações utilizando o React, frequentemente encontramos situações em que precisamos reiniciar e/ou limpar os estados de alguns componentes. 
Normalmente utiliza-se varias estratégias, tais como adicionar novos valores aos estados. Neste artigo veremos como utilizar a propriedade `key `para fazer isto.

## Uma pequena contextualização
A propriedade `key `é utilizada pelo React para criar uma relação entre o nosso componente e o elemento na DOM. Ou seja, nada mais que um identificador que ajuda o React a fazer as atualizações corretas sendo um dos motivos de serem obrigatórios no uso de listas.

## Problema
Para isso vamos utilizar como exemplo uma lista de produtos que quando clicar no botão `ver` , deve mostrar os dados detalhados do produto, incluindo suas avaliações.
Vamos supor a seguinte situação, você decide deixar uma nova avaliação para o produto e começa a digitar.

![Demonstração da aplicação desenvolvida](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8o0zr9tmcx3j30tsj2i.gif)
Porém, no meio do caminho tu decide ver as informações de outro produto.

![Novo passo na pesquisa por produtos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ml2p9e7t6qyu3aad2hq.png)
Então percebe que o comentário que tu estava escrevendo para o outro produto ainda está ali, quando não deveria.

## Por que isso ocorre?
Certo, agora que você entendeu o problema, vamos ao codigo!

![Código da ProductPage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g505j5q3nuj81ophjkhv.png)
[Código do componente](https://github.com/Bluniz/reset-states-react/blob/master/src/ProfilePage.jsx)
Este é o código da nossa página de produto, vamos entender o que está acontecendo:

- Temos dois estados
 - O `productID `que será o valor responsável para pegarmos os dados detalhados de um produto.
 - E a `productList `que será o valor responsável por guardar nossa lista de produtos que aparecerá em tela.
- Ao renderizar em tela o componente, o `useEffect `será executado e faremos uma requisição para nosso servidor, então em caso de sucesso guardaremos as informações da lista de produtos no estado `productList`.
- Enquanto não existir um valor na `productList `, deverá aparecer em tela uma mensagem de “loading…”
- Quando existir um valor na `productList `, iremos mostrar em tela nossa listagem.
- Quando clicarmos no botão ver de cada produto, adicionaremos seu respectivo ID no estado `productId`
- E quando um `productId `existir/for selecionado, deveremos mostrar em tela o componente `ProductInfo `que é responsável por pegar os dados detalhados de um produto especifico.

Pronto, agora vamos ao código do `ProductInfo `!
[Código](https://github.com/Bluniz/reset-states-react/blob/master/src/ProductInfo.jsx)
- Temos dois estados
 - `productInfo` que é responsável por guardar as informações de um produto para mostrarmos em tela.
 - `newAvaliation `que é responsável por guardar o que nós digitamos na avaliação.
![Estados](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bau34dnsl1y16notbmi.png)
- Temos também duas funções com responsabilidades diferentes
 - `getProductInfo` é responsável por fazer uma requisição ao nosso servidor e em caso de sucesso adicionar as informações do produto ao nosso estado `productInfo`.
 - `onSubmitNewAvaliation` é responsável por enviar nossa nova avaliação para nosso servidor e em caso de sucesso, atualizar os dados das informações do produto.

![functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de8do3plue4enesgaowa.png)
- A seguir o `useEffect `, no momento em que o componente aparecer em tela ele irá chamar a função `getProductInfo` que trará as informações do produto para nós.

![useEffect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6zn3d7f51cm18w3lahf.png)
- Então, renderizamos as informações do produto, incluindo as avaliações e adicionamos um input para que você possa adicionar novas avaliações ao produto.

![JSX](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mzepfm6gvk7m8iobpod.png)

Mas Lucas, ainda não entendi. O que está causando este comportamento do texto da nova avaliação?
Então, basicamente quando alteramos a propriedade `productId` que o componente `ProductInfo `recebe apenas os estados relacionados ao produto serão atualizados, pois o React entende que é o mesmo componente(presta bem atenção nesta frase) então atualiza apenas o necessário e os outros estados se mantem.

![Ilustração do fluxo de dados do componente](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8k250cp1ubmp8pbocin.png)
Ótimo, agora que sabemos o porque, vamos para o **como **resolver.

## Como resolver?
Provavelmente uma das primeiras soluções que vem a mente é: _**“Vou apenas adicionar um setState quando chamar os dados do produto para poder reiniciar o estado de nova avaliação”**_, algo mais ou menos assim: 

![Exemplo da função seguindo a ideia acima](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kf17lerpuelt0mej296.png)
É uma forma mais “comum” de se usar e não estou dizendo que tem algum problema utilizar, mas pense no seguinte cenário: 
_**”Tu tem pelo menos uns 5 a 6 estados que precisam ser reiniciados sempre que alguma propriedade mudar, então tu teria que adicionar um setState para cada um, limpando então os seus valores”**_.
Percebe que quanto maior nosso componente, mais inviável fica utilizar essa estratégia. 

Então, onde que entra a propriedade `key `que falamos lá no inicio?
Falamos que esta propriedade ajuda o React a fazer as atualizações corretas na nossa arvore(DOM), certo?
Bom, vamos ao código!

![Exemplo utilizando a propriedade key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toavr2u5ircwxoe2u9ny.png)
Vemos que a unica diferença no nosso codigo da `ProductPage` é a propriedade key no componente `ProductInfo.`

Vamos ver se realmente funciona?

![Exemplo da aplicação rodando após a ultima alteração](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n0qsp9xw9w9vc979z1v.gif)
Basicamente, a `key `nada mais é que o identificador do componente na DOM. Ou seja, quando alteramos a `key`, o React entende que ele é um novo componente. Portando ele inicia com seu estados iniciais. 
Essa abordagem é diferente pois no primeiro exemplo ainda é o mesmo componente apenas atualizando os estados. No segundo, a cada mudança de produto, é um novo componente.

Bom, não existe certo ou errado mas sim diversas abordagens para lidar com um problema, cada uma se encaixa em determinado contexto.
Se tu chegou até esse ponto do artigo, deve ter entendido que em alguns cenários temos o recurso da propriedade `key `para lidar com reset de estados. E de fato é algo bem simples de se fazer.

Se tu tiver qualquer duvida, sinta-se a vontade para perguntar😁.

## Algumas referencias
[Rendering Lists](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)
[You Might Not Need an Effect
](https://react.dev/learn/you-might-not-need-an-effect#resetting-all-state-when-a-prop-changes)

## Misc📜
[Meu Github](https://github.com/Bluniz)
[Twitter](https://twitter.com/blunizdev)
[Repositório do código utilizado como exemplo](https://github.com/Bluniz/reset-states-react)