Sobes.tech
Middle

¿Qué reglas existen para escribir hooks en React?

sobes.tech AI

Respuesta de la IA

  • Llamar a los hooks solo en el nivel superior de los componentes funcionales o dentro de otros hooks personalizados. No se deben llamar a los hooks en bucles, condiciones o funciones anidadas.
  • Llamar a los hooks solo dentro de componentes funcionales de React. No se deben llamar en funciones JavaScript normales o en componentes de clase.
  • La representación usando useCallback para memorizar funciones y useMemo para memorizar cálculos ayuda a optimizar el rendimiento.
  • Usar useEffect para efectos secundarios (cargar datos, suscripciones, etc.), especificando un array de dependencias para controlar la ejecución del efecto.
  • Mantener el orden de llamada a los hooks en cada renderizado del componente. React confía en este orden para enlazar correctamente el estado y los efectos.
  • Usar dependencias estables en los arrays de dependencias de useEffect, useCallback, useMemo. No pasar objetos o funciones que se crean en cada renderizado sin necesidad.
  • Crear hooks personalizados para reutilizar la lógica de estado entre componentes. Los nombres de los hooks personalizados deben comenzar con use.
// Ejemplo correcto: llamar a los hooks en el nivel superior
function MyComponent() {
  const [count, setCount] = useState(0); // En el nivel superior

  useEffect(() => { // En el nivel superior
    document.title = `Has pulsado ${count} veces`;
  }, [count]); // Array de dependencias

  const handleClick = useCallback(() => { // En el nivel superior
    setCount(c => c + 1);
  }, []); // Función memoizada

  return (
    <div>
      <p>Has pulsado {count} veces</p>
      <button onClick={handleClick}>
        Pulsa aquí
      </button>
    </div>
  );
}

// Ejemplo incorrecto: llamar a un hook en una condición
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // INCORRECTO: llamada en condición
//   }
//   // ...
// }

// Ejemplo incorrecto: llamar a un hook en un ciclo
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // INCORRECTO: llamada en ciclo
//   }
//   // ...
// }