Entendendo o Estado e os Efeitos no React: useState e useEffect

Um dos pontos mais poderosos do React é a capacidade de gerenciar estado e efeitos colaterais de maneira simples e organizada. Entender esses conceitos é essencial para criar aplicações dinâmicas, que reagem às interações do usuário e às mudanças de dados em tempo real. Vamos explorar como usar os Hooks useState e useEffect com exemplos práticos.

O que é Estado no React?

O estado é uma forma de armazenar valores que podem mudar ao longo do tempo e afetar a interface do usuário. Diferente de variáveis comuns, mudanças no estado causam re-renderização automática do componente.

Exemplo simples de useState:

import React, { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <h1>Você clicou {contador} vezes</h1>
      <button onClick={() => setContador(contador + 1)}>
        Clique Aqui
      </button>
    </div>
  );
}

🔍 Como funciona:

• useState(0) define o estado inicial como 0.
• contador armazena o valor atual.
• setContador atualiza o valor e re-renderiza o componente.

Introdução ao useEffect

Enquanto useState gerencia valores internos, o useEffect gerencia efeitos colaterais — ações que acontecem fora do fluxo normal de renderização. Exemplos incluem:

• Buscar dados de uma API
• Atualizar o título da página
• Adicionar e remover event listeners

Exemplo prático:

import React, { useState, useEffect } from 'react';

function Relogio() {
  const [hora, setHora] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setHora(new Date());
    }, 1000);

    return () => clearInterval(timer); // Limpeza
  }, []);

  return <h1>Hora atual: {hora.toLocaleTimeString()}</h1>;
}

🔍 Explicação:

• O useEffect executa um código sempre que o componente renderiza ou quando variáveis específicas mudam.
• O array [] como segundo argumento garante que o efeito rode apenas uma vez.
• O retorno da função (clearInterval) é usado para limpeza.

Dependências no useEffect

O segundo argumento de useEffect permite controlar quando o efeito roda:

• []: roda apenas uma vez ao montar.
• [variavel]: roda toda vez que a variável mudar.
• Sem array: roda a cada renderização.

Exemplo:

useEffect(() => {
  console.log('O valor mudou!');
}, [contador]);

Boas Práticas com useState e useEffect

1. Separar responsabilidades: Use múltiplos useEffect para tarefas diferentes.
2. Limpar efeitos: Sempre que criar timers, listeners ou conexões, limpe-os no retorno da função.
3. Manter o estado mínimo: Armazene apenas os valores necessários; derive o resto quando possível.

Exemplo Prático Completo

Aqui está uma aplicação simples que busca dados de uma API e atualiza a interface:

import React, { useState, useEffect } from 'react';

function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => setUsuarios(data));
  }, []);

  return (
    <div>
      <h1>Lista de Usuários</h1>
      <ul>
        {usuarios.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Conclusão

Dominar useState e useEffect é um dos primeiros passos para criar aplicações React interativas e reativas. Com eles, você consegue controlar dados internos, lidar com APIs externas e criar interfaces que respondem em tempo real às ações do usuário.

Conteúdo adaptado do livro “The Road to React”, de Robin Wieruch.