Custom Hooks no React: Como Criar e Quando Usar

Custom Hooks no React: Como Criar e Quando Usar

Custom hooks no React são funções JavaScript cujo nome começa com "use" e que reaproveitam lógica com estado entre componentes, chamando outros hooks como useState, useEffect ou useRef. Eles não mudam o que o componente renderiza: apenas tiram a lógica de dentro dele, deixando o código mais limpo, testável e fácil de reutilizar.

O que são custom hooks no React

Hooks chegaram ao React na versão 16.8 e, desde então, viraram a forma padrão de lidar com estado e efeitos colaterais em componentes de função. Um custom hook é simplesmente uma função sua que usa esses hooks internos e devolve valores, funções ou ambos.

A documentação oficial do React (react.dev) define uma regra clara: o nome de um hook deve começar com "use" seguido de letra maiúscula, como useOnlineStatus. Isso permite que o linter verifique as regras dos hooks automaticamente.

Um ponto importante: cada chamada de um custom hook tem seu próprio estado isolado. Dois componentes que usam o mesmo hook não compartilham dados, apenas a lógica.

Quando vale a pena criar um custom hook

Nem toda função precisa virar hook. Crie um custom hook quando:

• A mesma combinação de useState e useEffect aparece em dois ou mais componentes.
• Um componente está longo demais e mistura lógica de dados com marcação.
• Você quer testar a lógica separadamente da interface.
• Existe um comportamento com nome claro, como "buscar dados", "ler o localStorage" ou "detectar tamanho da tela".

Se a função não usa nenhum hook dentro, ela pode ser uma função utilitária comum, sem o prefixo "use".

Exemplo prático: useLocalStorage

Um dos custom hooks mais úteis em sites e landing pages guarda um valor no localStorage e o mantém sincronizado com o estado:

import { useState, useEffect } from 'react';

export function useLocalStorage(chave, valorInicial) {
  const [valor, setValor] = useState(() => {
    try {
      const salvo = localStorage.getItem(chave);
      return salvo ? JSON.parse(salvo) : valorInicial;
    } catch {
      return valorInicial;
    }
  });

  useEffect(() => {
    localStorage.setItem(chave, JSON.stringify(valor));
  }, [chave, valor]);

  return [valor, setValor];
}

Para usar, basta escrever const [tema, setTema] = useLocalStorage('tema', 'claro');. A API fica idêntica à do useState, o que facilita a adoção pelo time.

Exemplo prático: useDebounce para buscas

Outro caso clássico é evitar uma requisição a cada tecla digitada em um campo de busca. Um hook de debounce espera o usuário parar de digitar antes de atualizar o valor:

import { useState, useEffect } from 'react';

export function useDebounce(valor, atraso = 400) {
  const [debounced, setDebounced] = useState(valor);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(valor), atraso);
    return () => clearTimeout(id);
  }, [valor, atraso]);

  return debounced;
}

Combinado com uma consulta ao Supabase, esse padrão reduz chamadas desnecessárias ao banco e melhora a performance da busca.

Boas práticas para custom hooks em React

1. Faça uma coisa só. Um hook que busca dados, formata e ainda controla modal está fazendo demais. Divida em hooks menores.
2. Retorne o formato mais natural. Use array quando o hook se parece com useState e objeto quando devolve muitos valores nomeados.
3. Limpe os efeitos. Sempre retorne uma função de limpeza no useEffect para remover listeners, timers e assinaturas.
4. Declare as dependências corretamente. Ignorar o aviso do linter é fonte comum de bugs com valores desatualizados.
5. Considere bibliotecas prontas. Para busca de dados, TanStack Query costuma ser melhor do que um hook feito à mão.

O React 19.2 também trouxe o useEffectEvent, que ajuda a separar lógica "reativa" de lógica que apenas lê o valor mais recente, útil ao escrever hooks com efeitos mais complexos.

Perguntas Frequentes

O que é um custom hook no React? É uma função JavaScript que começa com "use" e reutiliza lógica com estado entre componentes, chamando outros hooks internamente.

Custom hooks compartilham estado entre componentes? Não. Cada componente que chama o hook recebe sua própria cópia do estado. Para compartilhar dados, use Context, uma biblioteca de estado global ou uma ferramenta de cache como TanStack Query.

Por que o nome do hook precisa começar com "use"? Porque o React e o plugin de lint dependem desse prefixo para identificar hooks e aplicar as regras, como não chamá-los dentro de condições ou laços.

Qual a diferença entre um custom hook e uma função utilitária? O custom hook usa hooks do React dentro dele, como useState ou useEffect. A função utilitária é JavaScript puro, sem dependência do ciclo de vida do componente.

Custom hooks ajudam na performance? Não diretamente. O ganho está na organização e na reutilização do código. A performance depende de como você escreve a lógica dentro do hook, por exemplo usando debounce ou memoização quando necessário.

Conclusão

Custom hooks são a maneira mais simples de manter componentes React pequenos e a lógica reaproveitável. Comece extraindo o primeiro padrão que você repete no projeto, dê um nome claro e teste isolado. Na Stormcore, aplicamos essa organização nos sites, sistemas e automações que desenvolvemos com React, Vite e Supabase, para que o código continue fácil de manter conforme o projeto cresce.