React - Versão 19.2

14 - State (useState)

Nesta aula, vamos aprender a utilizar o State no React através do Hook useState. O State permite armazenar e atualizar valores que refletem diretamente na interface.

O que é State?

O State é uma forma de armazenar dados dentro de um componente. Sempre que o valor do state muda, o React atualiza automaticamente a interface.

Diferente de variáveis comuns, o state faz com que o componente seja re-renderizado quando ocorre uma alteração.

---

1. Exemplo básico de State

No exemplo abaixo, utilizamos o useState para armazenar um texto e alterá-lo ao clicar em um botão:

// State
import { useState } from "react";

// Componente
function Estado(){

    // State
    const [texto, setTexto] = useState("Hello World!");

    // Função para alterar o texto
    function alterarTexto () {
        setTexto("Olá Mundo!");
    }

    // Retorno
    return(
        <>
            <h1>{texto}</h1>
            <button onClick={alterarTexto}>
                Alterar texto
            </button>
        </>
    );
}

// Exportar
export default Estado;

Explicação:

• texto é o valor atual do state
• setTexto é a função responsável por alterar o state
• Ao chamar setTexto, o React atualiza a tela automaticamente

---

2. State com valor numérico

O State também pode ser usado para trabalhar com números:

import { useState } from "react";

function Contador(){

    const [numero, setNumero] = useState(0);

    function incrementar(){
        setNumero(numero + 1);
    }

    return(
        <>
            <h1>{numero}</h1>
            <button onClick={incrementar}>
                Incrementar
            </button>
        </>
    );
}

export default Contador;

Explicação:

• O valor inicial do state é 0
• A cada clique, o número é incrementado

---

3. Alternando valores no State

Um uso muito comum do State é alternar valores entre true e false:

import { useState } from "react";

function EstadoBooleano(){

    const [ativo, setAtivo] = useState(true);

    function alterarEstado(){
        setAtivo(!ativo);
    }

    return(
        <>
            <h1>{ativo ? "Ativo" : "Inativo"}</h1>
            <button onClick={alterarEstado}>
                Alterar estado
            </button>
        </>
    );
}

export default EstadoBooleano;

Explicação:

• O state começa como true
• A cada clique, o valor é invertido
• A interface reflete automaticamente a mudança

---

Dicas importantes

• Nunca altere o state diretamente (ex: texto = "novo")
• Sempre utilize a função set para atualizar o state
• O State é essencial para criar interfaces dinâmicas

Agora você já sabe como utilizar o State no React!

Acompanhe nossa aula no YouTube e veja esses exemplos funcionando na prática!

Abaixo compartilho um vídeo mostrando cada etapa desta aula: