Obs: Esse conteúdo faz parte da Plataforma Front Academy.
Assista também nosso vídeo sobre esse assunto no YouTube

​O ​useState​ é um React Hook que nos permite usar states em um Functional Component, adicionando comportamentos e interações dinâmicas a uma página.

O que é um Hook?

Um Hook é uma função especial que te permite utilizar recursos do React. Por exemplo, useState é um Hook que te permite adicionar o state do React a um componente de função. - Documentação Oficial do React

Em geral, os Hooks começam com a palavra "use"​. Sempre que você ver essa palavra no início do nome de uma função, é muito provável que esteja vendo um Hook. Alguns exemplos são:

• useState;

• useEffect;

• useReducer;

• useContext;

• e muitos outros.

​​Sintaxe do useState

​const [liked, setLiked] = useState(false) // o valor de liked inicialmente é false

O ​useState​, ao ser executado, recebe um valor inicial e retorna um array com dois valores.

Podemos então pegar esses dois valores utilizando um ​destructuring assignment - entenda melhor essa sintaxe nesse outro artigo do blog​.

O primeiro valor é a variável do nosso state com o valor inicial que passamos ao useState - no exemplo acima é false - enquanto o segundo é uma função que tem como papel alterar o valor da primeira. Parece confuso? Vamos enteder com calma.

O valor inicial pode ser omitido, nesse caso, o valor inicial do state será undefined.

const [liked, setLiked] = useState() // aqui, "liked" será inicializado com um valor undefined

É importante que o valor inicial represente aquilo que realmente desejamos para aquele state, mesmo que a princípio um valor ​undefined​ possa fazer sentido. Ou seja, se queremos que um state tenha uma ​string, devemos iniciá-lo com uma string vazia; se queremos um array, com um array vazio; e assim sucessivamente.

Veja a comparação abaixo:

// sem valores iniciais bem definidos, o tipo de dado que iremos salvar em cada state fica "implícito"
​// o que não é bom, mesmo que o código funcione com um valor inicial undefined
​​const [liked, setLiked] = useState()
​const [nome, setName] = useState()
​const [count, setCount] = useState()
​const [lista, setLista] = useState()
​const [pessoa, setPessoa] = useState()
​
​// com valores iniciais bem definidos, só de ler o código já sabemos qual
​// o tipo de dado que cada state possui
​const [liked, setLiked] = useState(false) // liked é do tipo boolean
​const [name, setName] = useState('') // name é do tipo string
​const [count, setCount] = useState(0) // count é do tipo number
​const [list, setList] = useState([]) // list é do tipo array
​const [pessoa, setPessoa] = useState({}) // pessoa é do tipo object

No segundo exemplo, definimos de forma explícita o valor inicial de cada state, o que, além de evitar bugs, torna a leitura do código muito mais clara, já que vemos de forma explícita qual o tipo de dado dos states.

Lembre-se, em programação, explícito é melhor do que implícito.

Observe também que utilizamos vários states. Em um mesmo componente podemos utilizar quantos ​useState​​ quisermos ou forem necessários.

​​Utilizando e alterando o valor de um state

Após definir um state, podemos utilizá-lo dentro da nossa estrutura de HTML, sendo que, ao alterar seu valor utilizando o setState (o segundo valor que pegamos do useState), o React atualizará a página automaticamente.

Analisemos o seguinte exemplo:

function Counter() {
​  const [count, setCount] = useState(0)

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        O count é: {count}
      </button>
    </div>
  )
}

• Criamos um componente chamado ​Counter​, que retorna um HTML simples, com apenas uma ​​div​ e um ​button​;

• Criamos um state chamando a função ​useState(0)​ e passando um valor inicial ​0​;

• Definimos o texto do elemento ​button​ como sendo "O count é: {count}", que será exibido inicialmente como: "O count é: 0";

• Colocamos uma ação de ​onClick​ nesse botão, que irá executar uma função anônima, que por sua vez chamará ​setCount(count + 1)​, que irá alterar o valor da variável ​count​, somando mais um em seu valor atual;

• Sempre que o valor da variável ​count​ é alterado, o React reage​ a essa alteração e atualiza a exibição da página automaticamente.

​​Conclusão

​Os states no React são uma ferramenta muito poderosa, que adicionam comportamentos e interações dinâmicas a uma página. Entender seu funcionamento é meio caminho andado para entender o React, por isso, tenha certeza de estudar com calma esse conceito.