Hook

Hook é uma função do React cujo nome começa com use. Ela conecta o seu componente a alguma capacidade que ele não teria sozinho.

Os três que você vai encontrar sempre:

• useState: guarda um valor que muda. É o estado
• useEffect: roda algo depois que o componente aparece na tela, tipo buscar dados de uma API
• useRef: guarda uma referência a um elemento real da página, pra focar um campo ou medir um tamanho

useEffect(() => {
  document.title = "Perfil";
}, []);

O array vazio no fim quer dizer "roda uma vez só, quando o componente nasce". Se você colocar um valor lá dentro, ele roda de novo toda vez que aquele valor mudar.

As duas regras

1. hook só é chamado no topo do componente, nunca dentro de if ou de laço
2. hook só é chamado dentro de componente ou de outro hook

Se você quebrar essas regras o React reclama alto, então não dá pra errar em silêncio.

Custom hook

Quando um pedaço de lógica se repete em vários componentes, você extrai numa função useAlgumaCoisa e reusa. É o equivalente a transformar um agrupamento repetido num component: mesmo instinto, outro material.