React Hooks: todos os hooks explicados com exemplos ao vivo

React hooks são funções cujos nomes começam com use e que permitem a um componente de função usar recursos do React: useState para lembrar um valor, useEffect para executar código depois da renderização, useRef para guardar um nó do DOM, useContext para ler dados compartilhados. Você os chama no topo do seu componente, e o React mantém os valores deles entre renderizações.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

Quatro hooks trabalham juntos aqui. O useState guarda o texto, o useRef aponta para o input para que o botão possa focá-lo, o useMemo mantém a lista filtrada até a busca mudar e o useEffect registra depois de cada renderização em que a busca mudou. Digite an e observe o Console: uma linha por tecla, depois que a lista atualiza.

Por que os hooks existem

Antes do React 16.8, um componente que precisava de estado ou de código de ciclo de vida tinha que ser uma classe. A lógica de uma funcionalidade ficava dividida entre componentDidMount, componentDidUpdate e componentWillUnmount, e compartilhá-la entre componentes significava mixins (que nunca funcionaram com a sintaxe de classes), higher order components ou render props, todos envolvendo a sua árvore em camadas extras.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

Com hooks, a mesma funcionalidade fica em um só lugar: o efeito inicia o timer e a limpeza dele o para.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

Esconda o relógio e o Console imprime timer stopped: o React executou a limpeza quando Clock saiu da tela. Mostre de novo e um timer novo começa. Componentes de classe ainda funcionam no React 19, mas código novo usa hooks.

Todos os hooks embutidos

O React 19.2 agrupa os hooks pelo que eles dão a um componente. Você vai usar os dois primeiros grupos todos os dias e o resto quando um problema específico pedir.

use, useActionState, useOptimistic e useFormStatus chegaram com o React 19, e o useEffectEvent ficou estável no 19.2. Todos os outros hooks da lista também funcionam no React 18.

Estado renderiza, refs não

Nem todo hook dispara uma renderização. useState e useReducer disparam: mude o valor deles e o React desenha o componente de novo. O useRef entrega um objeto cujo campo current você pode mudar à vontade, e o React nunca renderiza de novo por causa dele. Isso o torna o lugar certo para o id de um timer, um valor anterior ou uma contagem que a tela não mostra.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

O useReducer guarda o carrinho e o useState guarda a anotação; os dois causam uma renderização quando mudam, e o efeito registra uma linha por renderização. O efeito também muda commits.current, mas essa mudança nunca causa uma renderização própria, então o log não entra em loop. A contagem é atualizada em um efeito em vez de no corpo do componente porque o corpo não deve mudar nada enquanto renderiza.

As regras dos hooks

Todo hook segue duas regras:

1. Chame hooks no nível superior do seu componente, nunca dentro de uma condição, de um loop ou de uma função aninhada.
2. Chame hooks só a partir de componentes de função ou dos seus próprios hooks personalizados.

O React não conhece os hooks pelo nome. Ele os conhece pela ordem em que você os chama e espera que essa ordem seja a mesma em toda renderização. Um hook dentro de um if deslocaria todos os hooks depois dele. A página sobre as regras dos hooks mostra o que quebra e como corrigir. O use é a única exceção: ele pode ser chamado dentro de uma condição.

O seu primeiro hook personalizado

Quando dois componentes precisam da mesma lógica com estado, leve-a para uma função cujo nome começa com use. Essa função pode chamar qualquer outro hook. Cada componente que a chama recebe o próprio estado.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

Os dois contadores executam o mesmo hook, mas clicar em um não mexe no outro: um hook personalizado compartilha lógica, não estado. Adicione uma função decrement ao useCounter e um botão que a chame, e os dois contadores a ganham de uma vez. Mais padrões (useToggle, useDebounce, useLocalStorage) estão na página de hooks personalizados.

Qual hook usar

• A tela deve mudar quando um valor muda: useState, ou useReducer quando muitos eventos atualizam o mesmo estado.
• Você precisa conversar com algo fora do React (um timer, uma assinatura, uma requisição): useEffect.
• Você precisa de um nó do DOM ou de um valor que a tela não mostra: useRef.
• Muitos componentes no fundo da árvore precisam do mesmo valor: useContext.
• Uma renderização é lenta por causa de um cálculo ou porque um filho memoizado renderiza de novo: useMemo e useCallback. O React Compiler pode adicionar essa memoização por você, mas escrevê-la à mão ainda funciona e ainda é comum.
• A digitação parece travada porque a atualização por trás dela é pesada: useTransition ou useDeferredValue.