Guia Prático

Estado no React

// useState, useCallback, useMemo, useRef, Context, Zustand

Guia completo: estado local, hooks de performance (useCallback, useMemo, useRef), useReducer, Context e store (Zustand). Exemplos reais copiáveis e quando usar cada um.

Doc oficial React: Gerenciando estado

Estado local (useState)

// o ponto de partida

useState é o primeiro passo: o estado vive no componente e desce para os filhos via props. Use para formulários, toggles, UI que não precisa ser acessada em vários níveis da árvore.

Subir estado (lift state up) só quando dois irmãos precisarem do mesmo dado. Se você começar a passar props por muitos níveis (prop drilling), é hora de considerar Context ou uma store.

Exemplo: contador com useState

import { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
    </div>
  );
}
 
// Estado vive no componente; os filhos recebem via props se precisar.

Exemplo: input controlado (formulário)

function SearchField() {
  const [query, setQuery] = useState("");
  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}
// Fonte única de verdade; fácil validar ou enviar.

Hooks de performance e refs

// useCallback, useMemo, useRef, useReducer

useCallback e useMemo evitam recriação de funções e valores entre renders; useRef guarda referência mutável (DOM, timer, valor anterior) sem causar re-render. useReducer centraliza lógica de estado complexa.

useCallback: quando passar callback para filho memoizado ou como dep de useEffect. useMemo: listas filtradas/ordenadas ou cálculos pesados. useRef: focus, intervalId, previous value. useReducer: estado com várias ações ou próximo de uma state machine.

useCallback

Retorna a mesma função entre renders enquanto as deps não mudarem. Essencial para React.memo + callback e para dependências estáveis em useEffect/useMemo.

Referência estável para filho memoizado

import { useCallback, useState } from "react";
 
function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount((c) => c + 1);
  }, []); // referência estável: filho memoizado não re-renderiza
  return <MemoizedChild onIncrement={handleClick} count={count} />;
}

Deps: incluir todo valor do closure usado dentro

// Deps: incluir todo valor do closure usado dentro
const fetchUser = useCallback(async (id: string) => {
  const res = await fetch(`/api/users/${id}`, { headers: { Authorization: token } });
  return res.json();
}, [token]); // token de props/state deve estar nas deps

useMemo

Memoiza o resultado de um cálculo; só recalcula quando as dependências mudam. Use para derivar dados (filter, sort) ou computação custosa.

Lista filtrada (evita refilter a cada render)

import { useMemo, useState } from "react";
 
function ProductList({ products, filter }: { products: Product[]; filter: string }) {
  const filtered = useMemo(
    () => products.filter((p) => p.name.toLowerCase().includes(filter.toLowerCase())),
    [products, filter]
  );
  return <ul>{filtered.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}

Cálculo pesado ou lista ordenada

// Cálculo pesado: só recalcula quando as entradas mudam
const sortedItems = useMemo(
  () => [...items].sort((a, b) => a.score - b.score),
  [items]
);
const stats = useMemo(() => computeHeavyStats(data), [data]);

useRef

Referência mutável que persiste entre renders e não dispara re-render. Uso: ref ao DOM, guardar intervalId/timeoutId, padrão "previous value".

Focus em input (ref ao DOM)

import { useRef, useEffect } from "react";
 
function SearchInput() {
  const inputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    inputRef.current?.focus();
  }, []);
  return <input ref={inputRef} type="search" />;
}

Padrão: valor anterior (ex.: para diff)

// Padrão: guardar valor anterior (ex.: para diff)
function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

Guardar ID do setInterval para cleanup

// Guardar valor mutável que não dispara re-render (ex.: ID do setInterval)
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
useEffect(() => {
  intervalRef.current = setInterval(tick, 1000);
  return () => {
    if (intervalRef.current) clearInterval(intervalRef.current);
  };
}, []);

useReducer

Estado com atualizações via actions; ideal quando a lógica de transição é complexa ou quando você quer previsibilidade (padrão reducer).

Exemplo: contador com increment/decrement

import { useReducer } from "react";
 
type State = { count: number };
type Action = { type: "increment" } | { type: "decrement"; by: number };
 
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "increment": return { count: state.count + 1 };
    case "decrement": return { count: state.count - action.by };
    default: return state;
  }
}
 
function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: "increment" })}>+1</button>
      <button onClick={() => dispatch({ type: "decrement", by: 1 })}>-1</button>
    </>
  );
}

Context API

// compartilhar sem prop drilling

Context expõe um valor para toda uma subárvore sem passar por cada nível. Ideal para tema, idioma (i18n), usuário logado e dados que muitas telas só leem.

Context não é cache: qualquer mudança no value re-renderiza todos os consumidores. Use para dados que mudam pouco; para estado que atualiza com frequência (ex.: carrinho), prefira Zustand ou similar para evitar re-renders em cascata.

1. Provider: criar e fornecer o valor

import { createContext, useState } from "react";
 
const ThemeContext = createContext<"light" | "dark">("light");
 
export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
}

2. Consumir com useContext

import { useContext } from "react";
 
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Submit</button>;
}
 
// Não precisa passar props por cada nível (evita prop drilling).

Zustand (e alternativas)

// store leve fora da árvore

Zustand mantém estado fora da árvore de componentes. Quem assina o store re-renderiza só quando a fatia que usa mudar. API mínima, sem Provider obrigatório, TypeScript-friendly.

Adote quando Context gerar muitos re-renders ou quando o estado for global e atualizado com frequência. Jotai e Redux são alternativas; escolha pelo tamanho do time e da aplicação.

Store: create + slice (count + increment)

import { create } from "zustand";
 
interface CounterStore {
  count: number;
  increment: () => void;
}
 
export const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));

Uso no componente: sem Provider

// Em qualquer componente (sem Provider necessário)
function Counter() {
  const { count, increment } = useCounterStore();
  return <button onClick={increment}>{count}</button>;
}
 
// Só re-renderiza quando a fatia que você usa mudar.

Quando usar o quê

// resumo prático

Nem todo app precisa de Redux. Ordem sugerida: useState → useCallback/useMemo/useRef quando precisar (performance) → Context (compartilhar em vários níveis) → Zustand ou outra store (quando Context não der conta).

Priorize simplicidade: estado local > hooks de performance quando medir > Context > store. Só adicione camadas quando a dor for real (performance, manutenção, testes).

Exemplos por cenário:

Cenário 1: useState — estado só no componente (ex.: formulário de login)

// useState: estado só neste componente (ou 1–2 níveis via props)
function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  // Não precisa compartilhar com outras telas → estado local basta
  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={...} />
      <button disabled={loading}>Submit</button>
    </form>
  );
}

Cenário 2: Context — mesmo valor em muitos níveis (ex.: tema, i18n)

// Context: mesmo valor lido em muitos níveis (evita prop drilling)
// ex.: tema, idioma, usuário logado — mudam pouco
function App() {
  return (
    <ThemeProvider>      {/* valor disponível para toda a árvore */}
      <Layout>
        <Sidebar />      {/* Sidebar e Page consomem tema sem props */}
        <Page />
      </Layout>
    </ThemeProvider>
  );
}
function Sidebar() {
  const theme = useContext(ThemeContext);  // sem prop drilling
  return <aside className={theme}>...</aside>;
}

Cenário 3: Zustand — estado global que atualiza com frequência (ex.: carrinho)

// Zustand (ou store): estado global que atualiza com frequência
// ex.: carrinho, filtros — muitos componentes leem e escrevem
// Cada componente re-renderiza só quando a fatia que usa mudar
const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((s) => ({ items: [...s.items, item] })),
}));
function Header() {
  const count = useCartStore((s) => s.items.length);  // re-render só se o length mudar
  return <span>{count} items</span>;
}
function ProductCard({ id }) {
  const addItem = useCartStore((s) => s.addItem);     // referência estável
  return <button onClick={() => addItem({ id })}>Add</button>;
}

Ver mais guias

Next.js App Router, React Patterns, TypeScript e Git: mais guias práticos na seção Dicas.

Ver todas as dicas

Conteúdo relacionado

Dicas de IA para DesenvolvedoresGuia prático de ferramentas IA, uso consciente de tokens e modelos: v0, Copilot, prompt engineering, boas práticas e ferramentas para produtividade dev.

Tailwind CSS + shadcn/ui — Guia PráticoSetup completo, componentes reutilizáveis, padrões de código e boas práticas com Tailwind CSS e shadcn/ui para projetos React e Next.js.

React Query Essencial — Cache e MutationsGuia completo de TanStack Query (React Query): cache inteligente, mutations, invalidação, otimistic updates e boas práticas para apps React.

10 min de leitura

import { useState } from "react";

function Counter() {

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

return (

<div>

<span>{count}</span>

<button onClick={() => setCount((c) => c + 1)}>+1</button>

</div>

);

}

// Estado vive no componente; os filhos recebem via props se precisar.

function SearchField() {

const [query, setQuery] = useState("");

return (

<input

value={query}

onChange={(e) => setQuery(e.target.value)}

placeholder="Search..."

);

}

// Fonte única de verdade; fácil validar ou enviar.

import { useCallback, useState } from "react";

function Parent() {

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

const handleClick = useCallback(() => {

setCount((c) => c + 1);

}, []); // referência estável: filho memoizado não re-renderiza

return <MemoizedChild onIncrement={handleClick} count={count} />;

}

// Deps: incluir todo valor do closure usado dentro

const fetchUser = useCallback(async (id: string) => {

const res = await fetch(`/api/users/${id}`, { headers: { Authorization: token } });

return res.json();

}, [token]); // token de props/state deve estar nas deps

import { useMemo, useState } from "react";

function ProductList({ products, filter }: { products: Product[]; filter: string }) {

const filtered = useMemo(

() => products.filter((p) => p.name.toLowerCase().includes(filter.toLowerCase())),

[products, filter]

);

return <ul>{filtered.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;

}

// Cálculo pesado: só recalcula quando as entradas mudam

const sortedItems = useMemo(

() => [...items].sort((a, b) => a.score - b.score),

[items]

);

const stats = useMemo(() => computeHeavyStats(data), [data]);

import { useRef, useEffect } from "react";

function SearchInput() {

const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {

inputRef.current?.focus();

}, []);

return <input ref={inputRef} type="search" />;

}

// Padrão: guardar valor anterior (ex.: para diff)

function usePrevious<T>(value: T): T | undefined {

const ref = useRef<T>();

useEffect(() => {

ref.current = value;

}, [value]);

return ref.current;

}

// Guardar valor mutável que não dispara re-render (ex.: ID do setInterval)

const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

useEffect(() => {

intervalRef.current = setInterval(tick, 1000);

return () => {

if (intervalRef.current) clearInterval(intervalRef.current);

};

}, []);

import { useReducer } from "react";

type State = { count: number };

type Action = { type: "increment" } | { type: "decrement"; by: number };

function reducer(state: State, action: Action): State {

switch (action.type) {

case "increment": return { count: state.count + 1 };

case "decrement": return { count: state.count - action.by };

default: return state;

}

function Counter() {

const [state, dispatch] = useReducer(reducer, { count: 0 });

return (

<span>{state.count}</span>

<button onClick={() => dispatch({ type: "increment" })}>+1</button>

<button onClick={() => dispatch({ type: "decrement", by: 1 })}>-1</button>

</>

);

}

import { createContext, useState } from "react";

const ThemeContext = createContext<"light" | "dark">("light");

export function ThemeProvider({ children }: { children: React.ReactNode }) {

const [theme, setTheme] = useState<"light" | "dark">("light");

return (

<ThemeContext.Provider value={theme}>

{children}

</ThemeContext.Provider>

);

}

import { useContext } from "react";

function ThemedButton() {

const theme = useContext(ThemeContext);

return <button className={theme}>Submit</button>;

}

// Não precisa passar props por cada nível (evita prop drilling).

import { create } from "zustand";

interface CounterStore {

count: number;

increment: () => void;

}

export const useCounterStore = create<CounterStore>((set) => ({

count: 0,

increment: () => set((s) => ({ count: s.count + 1 })),

}));

// Em qualquer componente (sem Provider necessário)

function Counter() {

const { count, increment } = useCounterStore();

return <button onClick={increment}>{count}</button>;

}

// Só re-renderiza quando a fatia que você usa mudar.

// useState: estado só neste componente (ou 1–2 níveis via props)

function LoginForm() {

const [email, setEmail] = useState("");

const [password, setPassword] = useState("");

const [loading, setLoading] = useState(false);

// Não precisa compartilhar com outras telas → estado local basta

return (

<input value={email} onChange={(e) => setEmail(e.target.value)} />

<button disabled={loading}>Submit</button>

</form>

);

}

// Context: mesmo valor lido em muitos níveis (evita prop drilling)

// ex.: tema, idioma, usuário logado — mudam pouco

function App() {

return (

<ThemeProvider> {/* valor disponível para toda a árvore */}

<Sidebar /> {/* Sidebar e Page consomem tema sem props */}

</Layout>

</ThemeProvider>

);

}

function Sidebar() {

const theme = useContext(ThemeContext); // sem prop drilling

return <aside className={theme}>...</aside>;

}

// Zustand (ou store): estado global que atualiza com frequência

// ex.: carrinho, filtros — muitos componentes leem e escrevem

// Cada componente re-renderiza só quando a fatia que usa mudar

const useCartStore = create((set) => ({

items: [],

addItem: (item) => set((s) => ({ items: [...s.items, item] })),

}));

function Header() {

const count = useCartStore((s) => s.items.length); // re-render só se o length mudar

return <span>{count} items</span>;

}

function ProductCard({ id }) {

const addItem = useCartStore((s) => s.addItem); // referência estável

return <button onClick={() => addItem({ id })}>Add</button>;

}