0Pricing
Frontend Academy · Aula

Hook useState: estado e novas renderizações

Chame useState para adicionar estado local a um componente, atualize o estado com a função setter e entenda quando e por que o React renderiza novamente.

Hook useState: estado e novas renderizações é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que é estado?

Estado são dados que mudam ao longo do tempo e devem fazer a interface do usuário ser atualizada quando isso acontece. Diferentemente de variáveis comuns, alterações de estado fazem React renderizar novamente o componente com o novo valor.

Sintaxe de useState

useState(initialValue) retorna uma tupla: o valor atual e uma função de atualização. Desestruture-a imediatamente.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // initial value: 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

TypeScript: definindo o tipo de useState

TypeScript infere o tipo a partir do valor inicial. Quando o valor inicial é ambíguo (null ou uma matriz vazia), adicione um parâmetro de tipo explícito.

const [count, setCount] = useState(0);           // inferred: number
const [name, setName]  = useState('');            // inferred: string
const [user, setUser]  = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicit

Nova renderização ao alterar o estado

Chamar a função de atualização agenda uma nova renderização. React chama novamente a função do componente com o novo valor de estado. O JSX retornado substitui a renderização anterior no DOM virtual.

Atualizações de estado são assíncronas

As atualizações de estado são agrupadas e aplicadas antes da próxima renderização, não imediatamente. Não leia o estado atualizado no mesmo manipulador de eventos — o novo valor não estará disponível até a próxima renderização.

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // still 0 — update hasn't applied yet
}

Atualizações funcionais

Quando o novo estado depende do estado anterior, utilize a forma funcional da função de atualização. Isso evita erros causados por fechamentos obsoletos.

// Risky (stale closure in async callbacks):
setCount(count + 1);

// Safe (functional update):
setCount(prev => prev + 1);

// Important for buttons that fire rapidly:
function increment() {
  setCount(c => c + 1); // always uses the latest value
}

Estado com objetos

Quando o estado é um objeto, sempre crie um novo objeto — não altere o existente. React compara por referência; alterações diretas não acionam novas renderizações.

const [user, setUser] = useState({ name: 'Alice', age: 30 });

// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!

// CORRECT: new object
setUser({ ...user, age: 31 });

Múltiplas variáveis de estado

Chame useState várias vezes para variáveis de estado independentes. Isso é mais organizado do que um único objeto de estado grande quando os valores não mudam juntos.

const [name, setName]   = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);

Inicialização tardia

Se o estado inicial exigir um cálculo dispendioso, passe uma função para useState. Ela será executada apenas na primeira renderização, não em todas as novas renderizações.

// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());

// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());

Quando não usar estado

Nem toda variável precisa ser estado. Valores derivados (total = items.reduce(…)) devem ser calculados durante a renderização, não armazenados no estado. Estado derivado de props geralmente indica engenharia excessiva.

Elevação do estado

Quando dois componentes irmãos precisam compartilhar estado, eleve-o ao ancestral comum e passe-o para baixo como props. Esse é o padrão fundamental de gerenciamento de estado do React antes de recorrer a contexto ou a uma loja.

Verificação rápida

Por que utilizar a forma funcional setCount(prev => prev + 1) em vez de setCount(count + 1)?

Recapitulação: useState

useState retorna [value, setter]. O valor inicial define o tipo (ou utilize um genérico explícito). A função de atualização aciona uma nova renderização. Utilize atualizações funcionais quando o novo estado depender do anterior. Objetos: sempre expanda para criar novos objetos, nunca os altere. Utilize inicialização tardia para cálculos dispendiosos. Eleve o estado aos ancestrais comuns quando componentes irmãos precisarem compartilhá-lo.

Perguntas Frequentes

A aula “Hook useState: estado e novas renderizações” é grátis?

Sim — o texto completo de “Hook useState: estado e novas renderizações” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Hook useState: estado e novas renderizações”?

Chame useState para adicionar estado local a um componente, atualize o estado com a função setter e entenda quando e por que o React renderiza novamente. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Hook useState: estado e novas renderizações”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. JSX: sintaxe e transpilação
  2. Componentes funcionais e props
  3. Hook useState: estado e novas renderizações
  4. Listas, chaves e renderização condicional
← Voltar para Frontend Academy