Como usar o hook useState do React

Aprenda como usar o hook useState do React na série Code React Hooks aqui no Hora de Codar!

Antes de explicar como usar o hook useState do React, a pergunta é: Você sabe o que é um hook?

Os React Hooks são uma ferramenta poderosa para desenvolver componentes funcionais reutilizáveis ​​de forma mais simples e eficiente. Ele é como uma chave de fenda ou um martelo que ajuda na construção de um brinquedo. Eles são como blocos de construção que nos ajudam a construir nossos aplicativos de uma maneira mais fácil e rápida.

Já entendido do assunto, você está pronto para aprender a usar o hook useState!

O useState é um hook para adicionar uma variável de estado (memória de um componente) ao seu componente. Para usar o useState você deve importar diretamente no React:

import { useState } from 'react';

export default function App(){
    const [state, setState] = useState(1);

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

ou:

import React from 'react'
export default function App(){
    const [state, setState] = React.useState(1);

Essas são duas maneiras de importar, porém não influencia em funcionalidade ou em performance, são somente maneiras de como usar o hook useState.

O useState retorna um array com esse valor (1) e uma função que permite alterar o estado para um outro valor. Porém, é importante ressaltar que no useState não é necessário você definir um valor previamente, e também você pode definir qualquer valor de qualquer tipo.

Para complementar o exemplo e mostrar como funciona o hook, agora você verá o uso prático do useState:

return (
    <>
      <p>{state}</p>
      <button onClick={() => setState(state + 1)}>+</button>
    </>
  );
}

O resultado você pode ver no seu navegador ao rodar o projeto.

useState com objetos

Também é possível usar o useState para manipular objetos.

Veja o exemplo a seguir:

import React from "react";
export default function App() {
  const [pessoa, setPessoa] = React.useState({
    nome: "Linus Torvalds",
    idade: 53, 
  })
    return (
    <>
      <p>{pessoa.nome}</p>
      <p>{pessoa.idade}</p>
      <button onClick={() => setPessoa({ ...pessoa, idade: pessoa.idade + 1 })}>
        +
      </button>
    </>
  );

Neste exemplo usamos o useState para armazenar o objeto e no jsx manipulamos o pessoa.idade com uma iteração com uma função no evento onClick.

Este foi o primeiro artigo da série Code React Hooks, série que tem como objetivo ensinar todos os hooks do React.

Aqui está um vídeo da playlist Simplificando os Hooks do React no canal Hora de Codar no YouTube falando sobre o hook useState, vídeo onde você irá aprender com exemplo prático como usar o hook useState do React.

Conclusão

Resumindo, o hook useState é um recurso que permite armazenar dados dentro de um componente, sem precisar de uma API ou uma fonte externa. Com ele, você pode, por exemplo, armazenar os dados da sua tela de formulário e enviar o estado para uma API para fazer a validação ou salvá-los. Também pode chamar a API e definir o valor no useState. O useState é um dos hooks mais utilizados do React e aqui você aprendeu como usá-lo. Se você gostou, peço que compartilhe com seus amigos para que eles também possam aprender.

Comunidade Hora de Codar

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Por que o estado não muda na hora?

Aqui pega muita gente de primeira viagem

Quando tu chama o setState, o React não altera a variável naquele exato instante, ele agenda uma nova renderização do componente com o valor novo

Ou seja, se tu der um console.log do state logo depois de chamar o setState, ainda vai aparecer o valor antigo

O valor atualizado só aparece no próximo render

Se liga: isso não é bug, é como o React funciona por baixo dos panos, ele controla QUANDO redesenha a tela pra não ficar re-renderizando à toa

Atualizando o estado com base no valor anterior

Repara que no contador a gente fez setState(state + 1)

Funciona, mas tem um jeito mais seguro quando o novo valor depende do valor antigo: passar uma função pro setState

setState(valorAtual => valorAtual + 1)

Assim o React te entrega o valor mais recente do estado dentro da função, mesmo que várias atualizações aconteçam quase juntas

É a forma recomendada quando tu incrementa, alterna ou soma em cima do estado anterior

useState com arrays

Assim como dá pra guardar objeto, dá pra guardar uma lista inteira no useState

A lógica é a mesma do objeto: nunca altera o array direto, tu cria um novo a partir do atual

Pra adicionar um item sem perder os antigos, espalha a lista atual e joga o novo no final

O espalhamento (…) copia o que já tinha e o React entende que o estado mudou, aí ele redesenha a tela

Perguntas frequentes sobre o useState

Dá pra ter vários useState no mesmo componente?

Dá sim, e é super comum

Cada estado que tu quer controlar pode ter o seu próprio useState, um pro nome, um pra idade, um pra lista, e por aí vai

Precisa definir um valor inicial?

Não é obrigatório

Se tu não passar nada, o estado começa como undefined, mas o ideal é já iniciar com um valor que faça sentido (0, string vazia, array vazio, objeto)

Qual a diferença de usar useState e uma variável normal?

Uma variável comum se perde a cada renderização e não avisa o React que a tela precisa mudar

O estado do useState sobrevive entre os renders e dispara a atualização da tela quando muda

É exatamente pra isso que ele existe