Trilha: Principais Hooks do ReactJS

Esta trilha oferece uma visão prática e aprofundada dos hooks mais importantes do React. Cada seção apresenta a motivação, um exemplo prático, armadilhas comuns e recomendações de uso.

Pré-requisitos

• Conhecimentos básicos de JavaScript (ES6+)
• Conceitos fundamentais do React (JSX, props, state, ciclo de vida em classes)

Objetivos

• Entender os hooks básicos: useState, useEffect, useContext, useRef.
• Conhecer hooks de performance: useMemo, useCallback.
• Gerenciar estados complexos com useReducer.
• Saber quando usar useLayoutEffect, useImperativeHandle, useDebugValue.
• Criar e reutilizar custom hooks.
• Evitar armadilhas comuns e testar hooks.

---

Regras dos Hooks (recapitulando)

• Só chame hooks no topo do componente React (não dentro de loops, condições ou funções aninhadas).
• Chame hooks apenas de componentes funcionais ou custom hooks.

Essas regras são fundamentais para que o React mantenha a ordem de chamadas e associe corretamente os estados e efeitos.

---

1) useState

O hook useState adiciona estado local a componentes funcionais.

Quando usar:

• Estados simples e locais (ex.: campos de formulário, contadores, toggles).

Exemplo:

import { useState } from 'react';

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

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

Dicas:

• Para atualizar a partir do valor anterior, use a versão com função: setState(prev => newValue).
• Evite armazenar objetos grandes se só parte do objeto mudar; prefira atualizar apenas a fatia necessária ou use useReducer.

Armadilhas:

• Não rely on state atualizado imediatamente — updates são assíncronos.

---

2) useEffect

useEffect executa efeitos colaterais (fetch, subscriptions, timers). Substitui os métodos de ciclo de vida das classes (componentDidMount, componentDidUpdate, componentWillUnmount).

Assinatura básica: useEffect(effect, deps).

Exemplo comum (fetch):

import { useEffect, useState } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    let mounted = true;
    fetch('/api/users')
      .then(r => r.json())
      .then(data => {
        if (mounted) setUsers(data);
      });

    return () => { mounted = false; };
  }, []); // [] -> executa apenas no mount

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

Dependências:

• Sempre liste todas as variáveis externas usadas no efeito (ou comente intencionalmente e documente a razão). Use ESLint plugin do React para ajudar.

Cleanup:

• Se o efeito cria subscriptions ou timers, retorne uma função de limpeza.

Armadilhas:

• Efeitos sem dependências podem provocar re-renders infinitos se atualizarem estado sem cuidado.

---

3) useContext

useContext(MyContext) permite acessar o valor do contexto dentro de um componente funcional.

Quando usar:

• Para dados globais leves: tema, usuário autenticado, preferências.

Exemplo:

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Eu sigo o tema</button>;
}

Dicas:

• Contexto não substitui gerenciamento de estado complexo (use Redux, Zustand, RTK Query, etc., quando necessário).
• Evite colocar estados de alta frequência (por exemplo, contadores que mudam muitas vezes) em contexto, pois tudo que consome o contexto re-renderiza.

---

4) useRef

useRef retorna um objeto mutável cuja propriedade .current persiste entre renders.

Usos comuns:

• Referenciar elementos DOM.
• Guardar valores mutáveis que não disparem re-render (ex.: timers, última versão de um prop).

Exemplo:

import { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputRef = useRef(null);

  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>Focar</button>
    </>
  );
}

Dica:

• Não use useRef para forçar re-render; se precisa re-renderizar quando o valor muda, use useState.

---

5) useMemo

useMemo memoriza o resultado de uma função cara entre renders, reavaliando apenas quando dependências mudam.

Uso:

• Evitar recomputações pesadas (cálculos, transformações de listas grandes).

Exemplo:

import { useMemo } from 'react';

function ExpensiveList({ items }) {
  const sorted = useMemo(() => {
    // operação cara
    return items.slice().sort((a,b) => a.value - b.value);
  }, [items]);

  return <List items={sorted} />;
}

Dicas:

• useMemo é uma otimização; só use quando há evidência de custo.
• Não use para efeitos colaterais.

---

6) useCallback

useCallback memoriza uma função, útil quando você passa callbacks para componentes filhos que dependem de igualdade referencial (por exemplo, React.memo).

Exemplo:

import { useCallback, useState } from 'react';

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

  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <Child onClick={handleClick} />;
}

Dicas:

• Evite uso excessivo — às vezes criar a função inline é mais simples e não causa problemas.

---

7) useReducer

Para estados complexos ou lógica de atualização previsível, useReducer pode ser melhor que múltiplos useState.

Exemplo (contador avançado):

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <div>{state.count}</div>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

Dicas:

• Combine com useContext para criar um store local (padrão similar ao Redux leve).

---

8) useLayoutEffect

useLayoutEffect roda sincronamente após todas as mutações DOM, antes do navegador pintar. Use quando precisa medir DOM e aplicar mudanças que não devem causar flicker.

Aviso:

• Pode bloquear pintura — use com parcimônia. Na maioria dos casos, useEffect é suficiente.

---

9) useImperativeHandle

Permite expor uma interface imperativa de um componente quando usado com forwardRef.

Exemplo:

import { forwardRef, useImperativeHandle, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
  }));
  return <input ref={inputRef} />;
});

Use quando for necessário permitir chamadas imperativas a partir do pai.

---

10) useDebugValue

useDebugValue(value) ajuda a mostrar informações customizadas no React DevTools para custom hooks.

Exemplo:

import { useDebugValue } from 'react';

function useFriendStatus(friendId) {
  const status = /* ... */;
  useDebugValue(status ? 'online' : 'offline');
  return status;
}

---

Hooks Customizados (Custom Hooks)

Custom hooks são funções que começam com use e permitem reutilizar lógica entre componentes.

Exemplo (useLocalStorage):

import { useState, useEffect } from 'react';

function useLocalStorage(key, initial) {
  const [state, setState] = useState(() => {
    try {
      const raw = localStorage.getItem(key);
      return raw ? JSON.parse(raw) : initial;
    } catch {
      return initial;
    }
  });

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

  return [state, setState];
}

Boas práticas:

• Mantenha custom hooks pequenos e especializados.
• Teste custom hooks isoladamente (ver abaixo).

---

Testando Hooks

• Use @testing-library/react e @testing-library/react-hooks (ou @testing-library/react + helpers) para montar components que usam hooks.
• Teste a lógica do hook com renderHook (se usar @testing-library/react-hooks / @testing-library/react tem utilitários parecidos).

Exemplo com @testing-library/react-hooks:

import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

test('useCounter increments', () => {
  const { result } = renderHook(() => useCounter());
  act(() => result.current.increment());
  expect(result.current.count).toBe(1);
});

---

Performance e Otimizações

• Meça antes de otimizar: use Profiler e DevTools.
• Use React.memo para componentes puros que recebem props estáveis.
• useMemo e useCallback ajudam quando há re-renderizações desnecessárias causadas por referência de objetos/funções.
• Evite colocar valores de alta frequência em Context.

---

Armadilhas Comuns

• Esquecer dependências no useEffect (causa bugs silenciosos).
• Usar useMemo/useCallback prematuramente (complexidade sem ganho).
• Mutar estado direto em vez de criar novos objetos — quebrem comparações referenciais.

---

Migração de Componentes de Classe

• this.state -> useState
• componentDidMount/componentDidUpdate/componentWillUnmount -> useEffect
• refs -> useRef

Exemplo simples:

Classe:

class Example extends React.Component {
  state = { count: 0 };
  componentDidMount() { /* ... */ }
  render() { return <div>{this.state.count}</div>; }
}

Funcional:

function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => { /* ... */ }, []);
  return <div>{count}</div>;
}

---

Recursos e Leitura Recomendada

• Documentação oficial React - Hooks: https://reactjs.org/docs/hooks-overview.html