em Geral

Entendendo o UseState no ReactJS

Eu resolvi fazer este tutorial depois de muitos guerreiros devs me pedirem pelas redes sociais para explicar na prática o funcionamento do estado ( State ) no ReactJS.

Toda e qualquer informação que precisa transitar entre os seus componentes de sua aplicação React precisam ser armazenadas no estado. Eu criei um exemplo prático aqui de um simples contador.

Vamos imaginar um contador onde nós temos uma função de incrementar e outra para decrementar um número. O estado precisa ser inicializado em zero e na medida que o usuário tentar incrementar ou decrementar este número o estado do contador é acionado. Então vamos ao exemplo:

Entendendo o código:

Acessando e setando o valor do estado

Na linha 05 nós inicializamos o nosso estado da variavél counter com o valor 0. Utilizamos a deestruturação para onde temos o acesso aos dados pela variavél counter e ao mesmo tempo o acesso a função setCounter que manipula os dados do estado

const [ counter, setCounter] = useState(0);

Veja que estamos utilizando um array na deestruturação onde temos a variavél counter e a função setCounter. Este estado inicia em 0

As funções que vamos manipular os dados do estado precisa estar dentro da função do componente, sim uma função dentro da função do componente.

function Incrementar(){

    setCounter( counter + 1);
    return counter;

  }

Na função que incrementar + 1 a cada clique pega o valor atual de counter que é 0 e soma um assim como no exemplo acima.

Depois de somado ele retorna o valor de counter já alterado.

O ReactJS utiliza o conceito de imutabilidade ou seja um valor ele sempre cria um novo estado e não atualiza o um determinado valor do estado.

Eu coloquei uma outra função que decrementa o valor verificando se o valor do estado é menor que 0 para que ele não permita que o valor do estado seja negativo.

Este é um exemplo extremamente simples para que você possa entender o funcionamento do estado. No estado você pode passar uma string, número, uma função um array e lá dentro do estado manipular esta informação da maneira que melhor entender.

Gostou da dica ? utilize os comentário caso tenha alguma dúvida e acompanhe o canal no Youtube para ver estes conceitos aplicados na prática.

Obrigado e abs