Reutilizar la lógica con Hooks personalizados

Hooks personalizados: compartir lógica entre componentes

Imagina que estás desarrollando una aplicación que depende en gran medida de la red (como la mayoría de aplicaciones). Quieres informar al usuario si su conexión de red se interrumpió accidentalmente mientras usaba tu aplicación. ¿Cómo lo harías? Parece que necesitarás dos cosas en tu componente:

1. Una parte del estado que rastree si la red está en línea.
2. Un Efecto que se suscriba a los eventos globales: online y offline, y actualice ese estado.

Esto mantendrá tu componente sincronizado con el estado de la red. Podrías empezar con algo como esto:

Intenta conectar y desconectar la red y observa cómo este StatusBar se actualiza en respuesta a tus acciones.

Ahora imagina que también quieres usar la misma lógica en un componente diferente. Quieres implementar un botón Guardar que se desactivará y mostrará «Reconectando…» en lugar de «Guardar» mientras la red está desconectada.

Para empezar, puedes copiar y pegar el estado isOnline y el Efecto en SaveButton:

Comprueba que, si apagas la red, el botón cambiará su apariencia.

Estos dos componentes funcionan bien, pero la duplicación de lógica entre estos es desafortunada. Parece que a pesar de que tienen una apariencia visual diferente, quieres reutilizar la lógica entre estos.

Extraer tu propio Hook personalizado de un componente

Imagina por un momento que, de forma similar a useState y useEffect, hay un Hook integrado denominado useOnlineStatus. Entonces, ambos componentes podrían simplificarse y podrías eliminar la duplicación entre estos:

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Conectado' : '❌ Desconectado'}</h1>;
}

function SaveButton() {
  const isOnline = useOnlineStatus();

  function handleSaveClick() {
    console.log('✅ Progreso guardado');
  }

  return (
    <button disabled={!isOnline} onClick={handleSaveClick}>
      {isOnline ? 'Guardar progreso' : 'Reconectando...'}
    </button>
  );
}

Aunque no exista un Hook integrado, puedes escribirlo por tu cuenta. Declara una función llamada useOnlineStatus y mueve todo el código duplicado dentro, desde los componentes que escribiste anteriormente:

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
  return isOnline;
}

En el final de la función, devuelve isOnline. Esto permite a tus componentes leer ese valor:

Verifica que al conectar y desconectar la red se actualicen ambos componentes.

Ahora tus componentes no tienen tanta lógica repetitiva. Más importante aún, el código dentro de estos describe qué quieren hacer (¡usar el estatus de conectado!) en lugar de cómo hacerlo (suscribirse a los eventos del navegador).

Cuando extraes lógica en un Hook personalizado, puedes ocultar los detalles retorcidos de cómo tratas con algún sistema externo o una API del navegador. El código de tus componentes expresan tu intención, no la implementación.

Los nombres de Hooks siempre empiezan con use

Las aplicaciones de React están construidas por componentes. Los componentes son construidos a partir de Hooks, ya sean integrados o personalizados. Es probable que a menudo uses Hooks personalizados creados por alguien más, pero ocasionalmente, ¡podrías escribir uno!

Debes seguir estas convenciones de nomenclatura:

1. Los nombres de componentes de React deben empezar con mayúscula, como StatusBar y SaveButton. Los componentes de React también necesitan devolver algo que React conozca cómo mostrar, como un bloque de JSX
2. Los nombres de Hooks deben empezar con use seguido por una mayúscula, como useState (integrado) o useOnlineStatus (personalizado, como antes en la página). Los Hooks pueden devolver valores arbitrarios.

Esta convención garantiza que siempre puedas mirar un componente y saber dónde pueden «esconder» su estado, Efectos, y otras características de React. Por ejemplo, si ves una invocación de función denominada getColor() en tu componente, puedes estar seguro de que no contiene un estado de React, porque su nombre no empieza con use. Sin embargo, una invocación de función como useOnlineStatus(), probablemente contendrá otros Hooks.

// 🔴 Evita: Un Hook que no usa Hooks
function useSorted(items) {
  return items.slice().sort();
}

// ✅ Correcto: Una función normal que no usa Hooks
function getSorted(items) {
  return items.slice().sort();
}

function List({ items, shouldSort }) {
  let displayedItems = items;
  if (shouldSort) {
    // ✅ Está bien llamar getSorted() condicionalmente porque no es un Hook
    displayedItems = getSorted(items);
  }
  // ...
}

// ✅ Correcto: Un Hook que usa otros Hooks
function useAuth() {
  return useContext(Auth);
}

// ✅ Correcto: Un Hook que probablemente contendrá otros Hooks después
function useAuth() {
  // TODO: Reemplaza con esta línea cuando la autenticación esté implementada:
  // return useContext(Auth);
  return TEST_USER;
}

Los Hooks personalizados permiten compartir la lógica con estado, no el estado en sí mismo

En el ejemplo anterior, cuando conectabas y desconectabas la red, ambos componentes se actualizaban juntos. Sin embargo, es erróneo pensar que una única variable de estado isOnline se comparte entre ellos. Mira este código:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

Funciona de la misma manera que antes de extraer la duplicación:

function StatusBar() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

function SaveButton() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

¡Estas son dos variables de estado y Efectos completamente independientes! Solo tuvieron el mismo valor al mismo tiempo, porque las sincronizaste con el mismo valor externo (si la red está conectada o no).

Para ilustrar mejor esto, necesitaremos un ejemplo diferente. Considera este componente Form:

Existe cierta lógica repetitiva para cada campo del formulario:

1. Hay un pedazo de estado (firstName y lastName).
2. Hay una función controladora de cambios (handleFirstNameChange y handleLastNameChange).
3. Hay un bloque de JSX que especifica los atributos value y onChange para las etiquetas input.

Puedes extraer la lógica repetitiva dentro del Hook personalizado useFormInput:

Ten en cuenta que solo se declara una variable de estado denominada value.

Sin embargo, el componente Form invoca a useFormInput dos veces:

function Form() {
  const firstNameProps = useFormInput('Mary');
  const lastNameProps = useFormInput('Poppins');
  // ...

¡Es por eso que funciona como declarar dos variables de estado separadas!

Los Hooks personalizados permiten compartir la lógica con estado pero no el estado en sí. Cada invocación al Hook es completamente independiente de cualquier otra invocación al mismo Hook. Es por eso que los dos sandboxes anteriores son completamente equivalentes. Si lo deseas, desplázate hacia atrás y compáralos. El comportamiento antes y después de extraer un Hook personalizado es idéntico.

Cuando necesites compartir el estado en sí entre múltiples componentes, levántalo y pásalo hacia abajo.

Paso de valores reactivos entre Hooks

El código dentro de los Hooks personalizados se volverá a ejecutar durante cada nuevo renderizado de tu componente. Por eso, como los componentes, los Hooks personalizados deben ser puros. ¡Piensa en el código de los Hooks personalizados como parte del cuerpo de tu componente!

Dado que los Hooks personalizados se rerenderizan en conjunto con tu componente, siempre reciben las últimas props y estado. Para ver qué significa esto, considera este ejemplo de una sala de chat. Cambia la URL del servidor o la sala de chat seleccionada:

Cuando cambias serverUrl o roomId, el Efecto «reacciona» a tus cambios y se vuelve a sincronizar. Puedes saber por los mensajes de la consola que el chat se vuelve a conectar cada vez que cambian las dependencias del Efecto.

Ahora mueve el código del Efecto dentro de un Hook personalizado:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('Nuevo mensaje: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

Esto permite al componente ChatRoom invocar tu Hook personalizado sin preocuparse por cómo funciona internamente:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });

  return (
    <>
      <label>
        URL del servidor:
        <input value={serverUrl} onChange={e => setServerUrl(e.target.value)} />
      </label>
      <h1>¡Bienvenido a la sala {roomId}!</h1>
    </>
  );
}

¡Esto parece mucho más simple! (Pero hace lo mismo).

Observa que la lógica sigue respondiendo a los cambios de props y estado. Intenta editar la URL o la sala seleccionada:

Observa cómo estás tomando el valor de devolución de un Hook:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

y lo pasas como entrada a otro Hook:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

Cada vez que tu componente ChatRoom se vuelve a renderizar, pasa el último roomId y serverUrl a tu Hook. Esta es la razón por la que tu Efecto se vuelve a conectar al chat cada vez que sus valores son diferentes después de volver a renderizarse. (Si alguna vez trabajaste con un software de procesamiento de música, encadenar Hooks como este puede recordarte encadenar múltiples Efectos de audio, como agregar reverberación o coro. Es como si la salida de useState «alimentara» la entrada de useChatRoom).

Pasar controladores de eventos a los Hooks personalizados

A medida que comiences a usar useChatRoom en más componentes, es posible que desees permitir diferentes componentes que personalicen su comportamiento. Por ejemplo, actualmente, la lógica de qué hacer cuando llega un mensaje está escrita dentro del Hook:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('Nuevo mensaje: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

Digamos que deseas mover esta lógica de regreso a tu componente:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl,
    onReceiveMessage(msg) {
      showNotification('Nuevo mensaje: ' + msg);
    }
  });
  // ...

Para hacer que esto funcione, cambia tu Hook para tomar onReceiveMessage como una de sus opciones nombradas:

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onReceiveMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl, onReceiveMessage]); // ✅ Todas las dependencias declaradas
}

Esto funcionará, pero hay una mejora que puedes hacer cuando tu Hook personalizado acepta controladores de eventos.

Agregar una dependencia en onReceiveMessage no es ideal, porque causará que el chat se vuelva a conectar cada vez que el componente se vuelva a renderizar. Envuelve este controlador en un Evento de Efecto para eliminarlo de las dependencias:

import { useEffect, useEffectEvent } from 'react';
// ...

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  const onMessage = useEffectEvent(onReceiveMessage);

  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ Todas las dependencias declaradas
}

Ahora el chat no se volverá a conectar cada vez que el componente ChatRoom se vuelva a renderizar. Aquí hay una demostración completamente funcional de pasar un controlador de evento a un Hook personalizado con el que puedes manipular:

Observa cómo ya no necesita saber cómo useChatRoom funciona para usarlo. Podrías agregarlo a cualquier otro componente, pasar cualquier otra opción y funcionará de la misma manera. Ese es el poder de los Hooks personalizados.

¿Cuándo usar Hooks personalizados?

No necesitas extraer un Hook personalizado por cada pequeño fragmento duplicado de tu código. Cierta duplicación está bien. Por ejemplo, probablemente no sea necesario extraer un Hook useFormInput para envolver una sola invocación de useState como antes.

Sin embargo, cada vez que escribas un Efecto, considera si sería más claro envolverlo también en un Hook personalizado. No deberías necesitar Efectos con mucha frecuencia, por lo que si estás escribiendo uno, significa que necesitas «salir de React» para sincronizar con algún sistema externo o hacer algo para lo que React no tiene API integrada. Envolver tu Efecto en un Hook personalizado permite comunicar con precisión tu intención y cómo fluyen los datos a través de este.

Por ejemplo, considera un componente ShippingForm que muestre dos menús desplegables: uno muestra la lista de ciudades y otro muestra la lista de áreas en la ciudad seleccionada. Puedes comenzar con un código que se vea así:

function ShippingForm({ country }) {
  const [cities, setCities] = useState(null);
  // Este Efecto recupera las ciudades de un país
  useEffect(() => {
    let ignore = false;
    fetch(`/api/cities?country=${country}`)
      .then(response => response.json())
      .then(json => {
        if (!ignore) {
          setCities(json);
        }
      });
    return () => {
      ignore = true;
    };
  }, [country]);

  const [city, setCity] = useState(null);
  const [areas, setAreas] = useState(null);
  // Este Efecto recupera las áreas para una ciudad seleccionada
  useEffect(() => {
    if (city) {
      let ignore = false;
      fetch(`/api/areas?city=${city}`)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setAreas(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [city]);

  // ...

Aunque este código es bastante repetitivo, es correcto mantener estos Efectos separados unos de otros. Estos sincronizan dos cosas diferentes, por lo que no debes fusionarlos en un solo Efecto. En su lugar, puedes simplificar el componente anterior ShippingForm, para extraer la lógica en común entre estos en tu propio Hook useData:

function useData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    if (url) {
      let ignore = false;
      fetch(url)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setData(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [url]);
  return data;
}

Ahora puedes reemplazar ambos Efectos en los componentes ShippingForm con invocaciones a useData:

function ShippingForm({ country }) {
  const cities = useData(`/api/cities?country=${country}`);
  const [city, setCity] = useState(null);
  const areas = useData(city ? `/api/areas?city=${city}` : null);
  // ...

Extraer un Hook personalizado hace que el flujo de datos sea explícito. Alimentas la entrada url y obtienes la salida data. Al «ocultar» tu Efecto dentro de useData, también puedes evitar que alguien trabaje en el componente ShippingForm y agregue dependencias innecesarias. Idealmente, con el tiempo, la mayoría de los Efectos de tu aplicación estarán en Hooks personalizados.

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // 🔴 Evita: usar Hooks personalizados de "ciclo de vida"
  useMount(() => {
    const connection = createConnection({ roomId, serverUrl });
    connection.connect();

    post('/analytics/event', { eventName: 'visit_chat' });
  });
  // ...
}

// 🔴 Evita: usar Hooks personalizados de "ciclo de vida"
function useMount(fn) {
  useEffect(() => {
    fn();
  }, []); // 🔴 El Hook useEffect de React tiene una dependencia faltante: 'fn'
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Correcto: dos Efectos sin procesar separados por propósito

  useEffect(() => {
    const connection = createConnection({ serverUrl, roomId });
    connection.connect();
    return () => connection.disconnect();
  }, [serverUrl, roomId]);

  useEffect(() => {
    post('/analytics/event', { eventName: 'visit_chat', roomId });
  }, [roomId]);

  // ...
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Genial: Hooks personalizados con el nombre de su propósito
  useChatRoom({ serverUrl, roomId });
  useImpressionLog('visit_chat', { roomId });
  // ...
}

Los Hooks personalizados te ayudan a migrar a mejores patrones

Los Efectos son un «escotilla de escape»: los usas cuando necesitas «salir de React» y cuando no hay mejor solución integrada para tu caso de uso. Con el tiempo, el objetivo del equipo de React es reducir al mínimo la cantidad de Efectos en tu aplicación al proporcionar soluciones más específicas para problemas más específicos. Envolver los Efectos en Hooks personalizados facilita actualizar tu código cuando estas soluciones estén disponibles. Volvamos a este ejemplo:

Volvamos a este ejemplo:

En el ejemplo anterior, useOnlineStatus es implementado con un par de useState y useEffect. Sin embargo, esta no es la mejor solución posible. Hay una serie de casos extremos que no considera. Por ejemplo, asume que cuando el componente se monta, isOnline ya es true, pero esto puede ser incorrecto si la red ya se desconectó. Puede usar la API del navegador navigator.onLine para verificar eso, pero usarla directamente se rompería si ejecutas tu aplicación de React en un servidor para generar el HTML inicial. En resumen, este código podría mejorarse.

Afortunadamente, React 18 incluye una API llamada useSyncExternalStore que se encarga de todos estos problemas por ti. Así es como funciona tu Hook useOnlineStatus, reescrito para aprovechar esta nueva API:

Observa cómo no necesitabas cambiar ninguno de los componentes para realizar esta migración:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

Esta es otra razón por la que envolver Efectos en Hooks personalizados suele ser beneficioso:

1. Haces que el flujo de datos hacia y desde tus Efectos sea muy explícito.
2. Permites que tus componentes se centren en la intención en lugar de la implementación exacta de tus Efectos.
3. Cuando React agrega nuevas funciones, puedes eliminar esos Efectos sin cambiar ninguno de tus componentes.

De manera similar a un sistema de diseño, podría resultarte útil comenzar a extraer modismos comunes de los componentes de tu aplicación en Hooks personalizados. Esto mantendría el código de tus componentes enfocado en la intención y te permitirá evitar escribir Efectos sin procesar muy a menudo. También hay muchos Hooks personalizados excelentes mantenidos por la comunidad de React.

import { use } from 'react'; // ¡No disponible aún!

function ShippingForm({ country }) {
  const cities = use(fetch(`/api/cities?country=${country}`));
  const [city, setCity] = useState(null);
  const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null;
  // ...

Hay más de una forma de hacerlo

Supongamos que deseas implementar una animación de aparición gradual desde cero usando la API del navegador requestAnimationFrame. Podrías empezar con un Efecto que configure un bucle de animación. Durante cada fotograma de la animación, podrías cambiar la opacidad del nodo del DOM que guardas en un ref hasta que alcance 1. Tu código podría empezar así:

Para que el componente sea más legible, podrías extraer la lógica en un Hook personalizado denominado useFadeIn.

Podrías mantener el código de useFadeIn como está, pero también podrías refactorizarlo más. Por ejemplo, podrías extraer la lógica para configurar el bucle de animación fuera de useFadeIn en un nuevo Hook personalizado llamado useAnimationLoop:

Sin embargo, no tenías que hacer eso. Al igual que con las funciones normales, en última instancia, decides dónde dibujar los límites entre las diferentes partes de tu código. Por ejemplo, también podrías adoptar un enfoque muy diferente. En lugar de mantener la lógica en el Efecto, podrías mover la mayor parte de la lógica imperativa dentro de una clase de JavaScript:

Los Efectos te permiten conectar React a sistemas externos. Cuanta más coordinación se necesita entre los Efectos (por ejemplo, para encadenar múltiples animaciones), más sentido tiene extraer completamente esa lógica de Efectos y Hooks completamente como en el sandbox anterior. Luego, el código que extraes se convierte en el «sistema externo». Esto permite que tus Efectos se mantengan simples porque solo necesitan enviar mensajes al sistema que moviste fuera de React.

Los ejemplos anteriores asumen que la lógica de aparición gradual debe escribirse en JavaScript. Sin embargo, esta particular animación de aparición gradual es más simple y eficiente de implementar con una simple animación CSS:

¡A veces ni siquiera necesitas un Hook!