React: Noções básicas sobre estado: useState

Última atualização: 2026-10-26

O State é a memória de um componente. Se os Props são parâmetros fornecidos por terceiros (somente leitura), então o State é o seu próprio caderninho (editável). O useState é o “chip de memória” que o React instala em um componente.

1. O que você vai aprender

• O que é o “State” e por que ele é necessário?
• Noções básicas sobre o uso do useState
• A maneira correta de atualizar os estados de arrays e objetos (imutabilidade)
• Gerenciamento de múltiplas variáveis de estado
• Elevando o Estado

2. Reflexões suscitadas por um contador

(1) Problema: as variáveis regulares não acionam atualizações na interface do usuário

Bob quer criar um contador simples: quando você clica no botão, o número aumenta em 1.

Bob descobriu um problema: As variáveis comuns não avisam o React para atualizar a interface do usuário. Toda vez que o componente é renderizado novamente, count é redefinido para 0.

(2) Uma solução utilizando useState

Valor de retorno: useState retorna um array [current value, setter function]. Após chamar setCount, o React re-renderiza automaticamente o componente para exibir os valores mais recentes.

3. Conceitos fundamentais do useState

(1) Análise da tarefa

import { useState } from 'react'

// useState(initialValue) Back [value, setValue]
const [count, setCount] = useState(0)
//      ^      ^          ^
//      |      |          └─ Initial value（Applies only to the first render）
//      |      └─ Update Function（Triggers a re-render after being called）
//      └─ Current status value（Get the latest value on every render）

(2) Mecanismo de atualização

Conceito-chave: setCount(count + 1) significa “solicitar ao React que atualize count na próxima renderização”, e não “alterar count imediatamente”. Isso é chamado de atualização assíncrona.

(3) Atualizações funcionais

Se o novo estado depender do antigo, você deve usar atualizações funcionais:

4. Atualização de matrizes e objetos (imutabilidade)

O React exige que o estado não seja modificado diretamente. Nunca use state.push() ou state.name = 'xxx'; em vez disso, crie um novo array ou objeto para substituir o valor antigo.

(1) Objetos a serem atualizados

(2) Atualizar o array

Saída:

Estado: arr

▶ Exemplo: Tabela de referência rápida para operações com matrizes

// ============================================
// Example：React Array Operations in C 6 Common Scenarios
// ============================================

const [arr, setArr] = useState([1, 2, 3])

// 1. Append to the end
setArr([...arr, 4])           // [1, 2, 3, 4]

// 2. Add to the beginning
setArr([0, ...arr])           // [0, 1, 2, 3]

// 3. Insert in the middle
const insertAt = 1
setArr([...arr.slice(0, insertAt), 99, ...arr.slice(insertAt)])
                              // [1, 99, 2, 3]

// 4. Delete Element（filter）
setArr(arr.filter(n => n !== 2))  // [1, 3]

// 5. Update Element（map）
setArr(arr.map(n => n === 2 ? 22 : n))  // [1, 22, 3]

// 6. Sort（Copy first, then sort）
setArr([...arr].sort((a, b) => b - a))  // [3, 2, 1]

Saída:

Operações de estado de array: push → adiciona item, filter → remove item, map → atualiza item. Cada operação retorna uma nova referência de array para que o React renderize novamente

5. Várias variáveis de estado

Um componente pode ter várias variáveis de estado. Recomenda-se dividi-las por lógica, em vez de agrupá-las em um único objeto grande:

function RegistrationForm() {
  // ✅ Recommendations：Logical Breakdown
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [errors, setErrors] = useState({})

  // ❌ Not recommended：All states are stored in a single object
  const [form, setForm] = useState({
    name: '', email: '', password: '',
    isSubmitting: false, errors: {}
  })
  // Expand the entire object when updating，Fields that are easy to overlook
}

Recomendação: Use várias instâncias de useState para estados independentes (como campos de entrada, indicadores de carregamento e mensagens de erro); campos logicamente relacionados (como todos os campos de um perfil de usuário) podem ser combinados em um único objeto.

6. Elevando o Estado

Quando vários componentes precisam compartilhar o mesmo estado, transfira o estado para o componente pai comum mais próximo.

graph TB
    subgraph "Before the status upgrade（Data is not shared）"
        A[Parent Component App] --- B[Child component A<br/>Have their own count]
        A --- C[Child component B<br/>Have their own count]
    end
    
    subgraph "After the status upgrade（Data Sharing）"
        D[Parent Component App<br/>**count Here**] --- E[Child component A<br/>Read count, Call setCount]
        D --- F[Child component B<br/>Read count, Call setCount]
    end

graph TB
    subgraph "Before the status upgrade（Data is not shared）"
        A[Parent Component App] --- B[Child component A<br/>Have their own count]
        A --- C[Child component B<br/>Have their own count]
    end
    
    subgraph "After the status upgrade（Data Sharing）"
        D[Parent Component App<br/>**count Here**] --- E[Child component A<br/>Read count, Call setCount]
        D --- F[Child component B<br/>Read count, Call setCount]
    end

Saída:

Estado: arr (setter: setArr)

▶ Exemplo: Aplicação prática da promoção de estado

Saída:

Ao digitar 100 em Celsius → o Fahrenheit exibe 212.0 automaticamente. Exibe "100°C = 212.0°F". Os dois campos permanecem sincronizados.

7. Exemplo completo: Contador do carrinho de compras

Saída:

Subtítulo: "Temperature Converter". Exibe: "Celsius（°C）：". Estado: temperature (setter: setTemperature)

Fluxo de interação:

• Toque em +/− para ajustar a quantidade; o subtotal e o total são atualizados em tempo real
• Clique em ✕ para excluir um item; exiba uma mensagem amigável quando o carrinho de compras estiver vazio
• Digite o código promocional REACT2026 para economizar 20 yuan

▶ Exemplo 3: Atualizando o estado de um objeto — Editando informações do usuário

function UserEditor() {
  const [user, setUser] = useState({ name: 'Alice', email: 'alice@test.com', age: 28 })

  function updateField(field, value) {
    setUser(prev => ({ ...prev, [field]: value }))
  }

  return (
    <div style={{ maxWidth: 400, margin: '0 auto' }}>
      <h3>Edit Profile</h3>
      <input value={user.name} onChange={e => updateField('name', e.target.value)}
        placeholder="Name" style={{ width: '100%', padding: 8, marginBottom: 8, borderRadius: 4 }} />
      <input value={user.email} onChange={e => updateField('email', e.target.value)}
        placeholder="Email" style={{ width: '100%', padding: 8, marginBottom: 8, borderRadius: 4 }} />
      <input type="number" value={user.age} onChange={e => updateField('age', Number(e.target.value))}
        placeholder="Age" style={{ width: '100%', padding: 8, marginBottom: 8, borderRadius: 4 }} />
      <pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4, fontSize: 13 }}>
        {JSON.stringify(user, null, 2)}
      </pre>
    </div>
  )
}

Saída:

Estado: address. Campos de entrada: Street, City, ZIP

Saída:

Exibe: "Edit Profile". Estado: user (setter: setUser). Entrada: Name, Email, Age

▶ Exemplo 4: Estados de objetos aninhados — Gerenciamento de endereços

Saída:

Formulário de endereço de entrega: Street, City, ZIP, menu suspenso de país (US/CN/JP), caixa de seleção "Primary address". Todos os campos atualizam o estado de forma reativa.

Saída:

Exibe: "Shipping Address". Estado: address (setter: setAddress). Entrada: Street, City, ZIP. Menu suspenso: United States, China, Japan

▶ Exemplo 5: As atualizações funcionais resolvem o problema das atualizações em lote

Saída:

Score: 0, Multiplier: x1. +10/+50/+100 somam pontos × multiplicador. "2x Multiplier" dobra o multiplicador (máx. x8). Reset → Score: 0, x1

❓ Perguntas Frequentes

📖 Resumo

• O estado é a “memória” de um componente; quando ele muda, isso aciona automaticamente uma atualização da interface do usuário
• useState(initialValue) Retorna a matriz [value, setValue]
• Imutabilidade: Nunca modifique o estado diretamente; em vez disso, crie um novo objeto ou array para substituí-lo.
• A atualização funcional setCount(prev => prev + 1) é mais precisa quando se baseia em valores antigos
• Elevação de estado: Quando vários componentes filhos precisam compartilhar dados, o estado é elevado para um componente pai comum.

📝 Exercícios

1. Exercício básico (Dificuldade ⭐): Crie um componente LikeButton que alterne entre os estados ❤️ e 🤍 quando clicado e exiba o número de curtidas.
2. Exercício avançado (Dificuldade ⭐⭐): Crie um componente ExpenseTracker que utilize useState para gerenciar uma lista de despesas (descrição, valor, data) e permita adicionar e remover itens.
3. Desafio (Dificuldade: ⭐⭐⭐): Crie um componente ColorPicker que utilize três instâncias de useState para gerenciar os valores dos controles deslizantes R, G e B (0–255) e exiba uma pré-visualização da cor em tempo real e o código hexadecimal da cor.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós