DEV Community

Cover image for React - O que são Estados
Jorge Nascimento
Jorge Nascimento

Posted on • Updated on

React - O que são Estados

O estado permite gerenciar dados alterados em uma aplicação, em React podemos usar estados em componentes de classe e também em componentes funcionais através da API de Hooks.

React atualiza a interface sempre que um estado é alterado, isso faz com que o componente seja renderizado novamente assim como seus filhos, porém devido a virtual DOM o React alterar apenas o que precisa ser modificado, assim tornando essas alterações performática na manipulação da DOM.

Exemplos serão usando componentes de função devido ser a forma mais utilizada.

Vamos ao exemplo para entender melhor:

...
const Counter = () => {

  let counter = 0;

  function handleClick(){
    counter++;
    console.log(counter);
  } 

  return (
   <>
      <div>
        Contador: {counter}
      </div>
      <button onClick={handleClick}>Incrementar</button>
   </>
  )
}
Enter fullscreen mode Exit fullscreen mode

Aqui temos um componente que renderiza um contador, atribuimos um botão para incrementar esse contador através do clique, porém ao clicar no botão você vai peceber que a variável é atualizada no console e o contador não atualiza em tela.
Isso ocorre porque o React so renderiza novamente o componente após atualização em algum estado.

Vamos ver como corrigir isso usando o hook useState() para manipular o contador.

import React, { useState } from 'react'

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

  // let counter = 0;

  function handleClick(){
   setCounter(counter + 1)
    console.log(counter);
  } 

  return (
   <>
      <div>
        Contador: {counter}
      </div>
      <button onClick={handleClick}>Incrementar</button>
   </>
  )
} 
Enter fullscreen mode Exit fullscreen mode

Aqui substituimos a variável counter e usamos o state do React, o useState retorna um array onde o primeiro item é a variável que armazena o estado ( que pode ser de vários tipos, como string, número, array, objeto e etc) e o segundo é uma função que altera esse estado, dessa forma ao clicar no botão a interface será atualizada corrigindo o que ocorria anteriormente.

Você pode definir um valor inicial do estado na inicialização do useState(initialValue).

Não é possivel alterar o estado diretamente, você tem acesso ao valor anterior para gerar um estado atualizado.

Vamos entender o uso do useState:

  • Para usar o hook useState, precisamos importá-lo como fizemos na primeira linha.
  • Dentro do componente Counter, estamos chamando useState passando 0 como valor inicial e usando a sintaxe de desestruturação.
  • Armazenamos os valores de array retornado por useState dentro das variáveis counter e setCounter.
  • É uma convenção comum prefixar o nome da função usado para atualizar o estado com a palavra set como em setCounter.
  • Quando clicamos no botão de incremento, estamos definindo uma função handleClick e chamando a setCounter passando o valor do contador atualizado.
  • Observe que como já temos o valor do contador, usamos isso para incrementar o contador usando setCounter(counter + 1).

Também é possivel passar uma função como parâmentro do useState, essa função tem acesso ao valor anterior do estado, use quando o novo valor depender da manipulação do último do estado.

...
useState((prevState) => prevState + 1)
Enter fullscreen mode Exit fullscreen mode

A função que manipula o estado é assíncrona, é importante se atentar a isso para evitar comportamentos indesejados no uso do estado.

O uso de estados em React é o que dita as modificações na interface do usuário, sempre que precisamos manipular algum dado que será exibido em tela ou alguma informação que possa alterar o estado da aplicação, seja aparência, cor, alterações de modo geral utilizamos esse hook, na API de Hook existem outras funções que serão abordado em post futuro.

Baseado no post - How State Works in React – Explained with Code Examples

Documentação Oficial - Estado e Ciclo de Vida

Veja também: Aprendendo React - The Roadmap! | React - O que é JSX | React - O que são Componentes

Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como insentivo no meus estudos de React criando outros posts pra fixação do aprendizado.


Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com


Me Sigam :)

Github | Linkedin

Top comments (0)