Principais Hooks do React

State Hooks

O state permite que um componente “lembre” informações entre renderizações. Por exemplo, um campo de input que salva o que o usuário digitou, ou uma galeria que mantém qual imagem está sendo exibida.

useState

Declara uma variável de state que pode ser atualizada diretamente.

Copiar
const [index, setIndex] = useState(0);

useReducer

Indicado para lógicas de atualização de state mais complexas, com múltiplas condições.

Copiar
const [state, dispatch] = useReducer(reducer, initialState);

➡️ Dica: Prefira useReducer quando o state tiver muitas transições ou depender de dados anteriores.

Context Hooks

O Context permite compartilhar dados entre componentes, sem precisar passar props manualmente por todos os níveis da árvore.

useContext

Permite acessar dados de um Contexto.

Copiar
const theme = useContext(ThemeContext);

➡️ Dica: Use contextos para temas, autenticação e preferências globais.

Ref Hooks

Refs mantêm informações que não causam re-renderizações. Muito útil para acessar o DOM ou armazenar IDs de timeouts.

useRef

Declara uma ref mutável. Normalmente usado para referenciar elementos DOM.

Copiar
const inputRef = useRef(null);

useImperativeHandle

Permite personalizar o que será exposto quando se usa ref em um componente customizado.

➡️ Dica: Use refs com moderação. Evite usá-las para gerenciar dados de interface.

Effect Hooks

Effects conectam o componente a sistemas externos, como APIs, eventos DOM, animações, entre outros.

useEffect

Ideal para buscar dados, configurar subscrições, etc.

Copiar
useEffect(() => {
  const connection = createConnection(roomId);
  connection.connect();
  return () => connection.disconnect();
}, [roomId]);

Variações raras:

• useLayoutEffect: executa antes da pintura do navegador (útil para medir elementos).
• useInsertionEffect: executa antes da modificação do DOM (útil para bibliotecas que inserem CSS).

➡️ Dica: Se não estiver lidando com código externo ou assíncrono, provavelmente você não precisa de useEffect.

Performance Hooks

useMemo

Evita recálculos desnecessários de funções pesadas.

Copiar
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);

useCallback

Previne recriação de funções em cada render.

Copiar
const handleClick = useCallback(() => doSomething(id), [id]);

useTransition & useDeferredValue

Usados para diferenciar atualizações rápidas e lentas na interface.

➡️ Dica: Use performance hooks quando notar lentidão em re-renderizações ou quando a UI parecer "travada".

Outros Hooks

• useDebugValue: Customiza o rótulo nos DevTools para hooks personalizados.
• useId: Gera IDs únicos, útil para elementos com acessibilidade.
• useSyncExternalStore: Integra com fontes de dados externas.
• useActionState: Controla o state de actions assíncronas.

Hooks Personalizados

Você pode criar seus próprios hooks, como funções JS que usam outros hooks.

Copiar
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return width;
}

Dicas e Boas Práticas

• Nomeie sempre os hooks personalizados com o prefixo use.
• Mantenha os hooks no topo do componente (não dentro de if, for ou try/catch).
• Separe lógica com custom hooks para facilitar testes e reutilização.
• Use useMemo e useCallback apenas quando realmente necessário — medir é melhor que presumir.
• Prefira useReducer a useState para estados com lógica complexa.

Com esses hooks, você pode criar aplicações React mais organizadas, performáticas e fáceis de manter!