Fundamentos

Custom Hooks

Funções que começam com 'use' e encapsulam lógica reutilizável de stateful logic.

Definição

Custom Hooks são funções JavaScript que começam com 'use' e podem chamar outros hooks. Permitem extrair e reutilizar lógica stateful entre componentes sem precisar de HOCs ou render props. Cada chamada de um custom hook tem seu próprio estado isolado.

Problema → Solução

Problema

Lógica complexa duplicada em vários componentes (subscriptions, formulários, fetching) — código repetido e difícil de manter.

Solução

Extrair a lógica em um custom hook que retorna apenas o necessário. Cada componente que usa o hook tem sua instância isolada de estado.

Dica de entrevista

Tip

Nome SEMPRE começa com 'use' para ESLint validar regras dos hooks. Retorne tupla [valor, setter] ou objeto, conforme a clareza.

Código

function useDebounce(value, delay = 500) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

// Uso
function SearchInput() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) fetchResults(debouncedQuery);
  }, [debouncedQuery]);
}

Perguntas de entrevista

Q.Custom hooks compartilham estado entre componentes?▾

A.Não. Cada chamada de um custom hook em um componente diferente tem estado independente. Para compartilhar estado, use Context, Zustand, Redux ou outra solução de state management.

Q.Quando criar um custom hook?▾

A.Quando a mesma lógica stateful aparece em 2+ componentes. Ou quando um componente fica difícil de ler com muitos hooks misturados — extrair para custom hook melhora legibilidade.

Q.Custom hook pode chamar outros custom hooks?▾

A.Sim, hooks compõem. useUser pode chamar useFetch que chama useState e useEffect. As Rules of Hooks valem em toda a cadeia.

22/122← →