Quais são as regras dos hooks, e por que elas existem?

Chame hooks só no nível mais alto de um componente ou de outro hook, nunca dentro de uma condição, laço ou callback aninhado, e só a partir de funções React. O motivo é que o React guarda o estado dos hooks como uma lista ordenada na fiber e casa cada chamada com um slot pela ordem de chamada, não pelo nome. Mude a ordem entre renders e todo hook depois daquele ponto lê o slot errado.

Duas regras: hooks ficam no nível mais alto, e só são chamados de dentro de um componente ou de outro hook. O motivo é a implementação. O React não sabe o nome dos seus hooks, ele mantém uma lista na fiber e move um cursor por ela enquanto sua função roda, então a primeira chamada de useState pega o slot um, a segunda pega o slot dois, e assim por diante. Se você embrulhar um hook num if, em alguns renders o cursor cai uma posição fora, e todo hook depois daquele lê o estado do hook anterior. Você ganha falhas bizarras onde um booleano vira uma função. Quando eu preciso de algo condicionalmente, eu sempre chamo o hook e faço o próprio hook não fazer nada, por exemplo passando uma flag enabled para um hook de query, ou empurrando o desvio um nível acima para que os dois caminhos sejam componentes separados. Eu mantenho as regras do eslint ligadas e trato uma supressão como algo que precisa de um comentário explicando exatamente o porquê.