¿Cuáles son las reglas de los hooks y por qué existen?

Llama a los hooks solo en el nivel superior de un componente o de otro hook, nunca dentro de una condición, un bucle o un callback anidado, y solo desde funciones de React. La razón es que React guarda el estado de los hooks como una lista ordenada en el fiber y asocia cada llamada a una posición por orden de llamada, no por nombre. Cambia el orden entre renders y todos los hooks a partir de ahí leerán la posición equivocada.

Dos reglas: los hooks van en el nivel superior y solo se llaman desde un componente o desde otro hook. La razón es la implementación. React no conoce los nombres de tus hooks, mantiene una lista en el fiber y mueve un cursor por ella mientras se ejecuta tu función, así que la primera llamada a useState se queda con la posición uno, la segunda con la dos, y así. Si envuelves un hook en un if, en algunos renders el cursor cae una posición desplazado y todos los hooks siguientes leen el estado del hook anterior. Aparecen fallos rarísimos donde un booleano se convierte en una función. Cuando de verdad necesito algo condicional, siempre llamo al hook y hago que el propio hook no haga nada, por ejemplo pasando un flag enabled a un hook de query, o subo la bifurcación un nivel para que los dos caminos sean componentes separados. Mantengo las reglas de eslint activadas y trato cualquier supresión como algo que necesita un comentario explicando exactamente por qué.