Los hooks son funciones especiales que te permiten "engancharte" a las características de React desde componentes funcionales. Ya conoces tres:
El prefijo use es la señal de que una función es un hook. Es lo que le dice a React: "esta función necesita acceso a mis internals".
React tiene solo dos reglas para los hooks. Son simples pero inquebrantables:
Los hooks deben llamarse en el nivel superior de tu componente. Nunca dentro de condicionales, bucles o funciones anidadas.
Los hooks solo pueden llamarse en:
use)React identifica cada hook por su posición (el orden en que se llama). En el primer render:
Si metes un hook dentro de un if, en algunos renders podría no ejecutarse. Los hooks se "desplazarían" y React asociaría el valor equivocado al hook equivocado:
React confunde un estado con un efecto. Todo se rompe.
El truco es llamar al hook siempre, y poner la condición dentro del efecto o en el JSX:
Además de los tres que conoces, React tiene más hooks:
| Hook | Para qué |
|---|---|
useMemo | Memorizar cálculos costosos |
useCallback | Memorizar funciones |
useContext | Acceder a contexto global |
useReducer | Estado complejo con acciones |
No necesitas dominarlos todos ahora — los tres que conoces cubren el 90% de los casos.
En el editor tienes un componente con hooks usados incorrectamente (dentro de condicionales). Tu misión:
Las reglas de los hooks son el contrato que haces con React. Respétalas y React te recompensará con un comportamiento predecible y sin bugs misteriosos.