Separar eventos de Efectos

Elegir entre controladores de eventos y Efectos

Primero, vamos a recapitular la diferencia entre controladores de eventos y Efectos.

Imagina que estas implementando un componente de sala de chat. Tus requerimientos se verán así:

1. Tu componente debería conectarse de forma automática a la sala de chat seleccionada.
2. Cuándo hagas click al botón «Enviar», debería enviar un mensaje al chat.

Digamos que ya tienes el código implementado para ello, pero no estas seguro de donde ponerlo. ¿Deberías de usar controladores de eventos o Efectos? Cada vez que necesites contestar este pregunta, considera por qué se necesita ejecutar el código.

Los controladores de eventos se ejecutan en respuesta a interacciones especificas

Desde la perspectiva del usuario, el envío de un mensaje debe producirse porque se hace clic en particular en el botón «Enviar». El usuario se enfadará bastante si envías su mensaje en cualquier otro momento o por cualquier otro motivo. Esta es la razón por la que enviar un mensaje debería ser un controlador de evento. Los controladores de eventos te permiten controlar interacciones específicas:

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');
  // ...
  function handleSendClick() {
    sendMessage(message);
  }
  // ...
  return (
    <>
      <input value={message} onChange={e => setMessage(e.target.value)} />
      <button onClick={handleSendClick}>Enviar</button>
    </>
  );
}

Con un controlador de Evento, puedes estar seguro que sendMessage(message) únicamente se activará si el usuario presiona el botón.

Los Efectos se ejecutan siempre que es necesaria la sincronización

Recuerda que también necesitas mantener el componente conectado a la sala de chat. ¿Dónde va ese código?

La razón para ejecutar este código no es ninguna interacción en particular. No es importante, el cómo o de qué forma el usuario navegó hasta la sala de chat. Ahora que ellos están viéndola y pueden interactuar con ella, el componente necesita mantenerse conectado al servidor de chat seleccionado. Incluso si el componente de la sala de chat fuera la pantalla inicial de tu aplicación y el usuario no ha realizado ningún tipo de interacción, todavía necesitarías conectarte. Es por eso que es un Efecto:

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

Con este código, puedes estar seguro que siempre hay una conexión activa al servidor de chat seleccionado actualmente, independientemente de las interacciones específicas realizadas por el usuario. Si el usuario solo ha abierto tu aplicación, seleccionado una sala diferente o navegado a otra pantalla y volvió, tu Efecto garantiza que el componente permanecerá sincronizado con la sala seleccionada a actualmente, y volverá a conectarse cuando sea necesario.

Valores reactivos y lógica reactiva

Intuitivamente, podría decirse que los controladores de eventos siempre se activan «manualmente», por ejemplo, al pulsar un botón. Los Efectos, en cambio, son «automáticos»: se ejecutan y se vuelven a ejecutar tantas veces como sea necesario para mantenerse sincronizados.

Hay una forma más precisa de pensar en esto.

Las propiedades, estados, y variables declarados dentro del cuerpo de tu componente son llamados valores reactivos. En este ejemplo, serverUrl no es un valor reactivo, pero roomId y message sí lo son. Participan en el flujo de datos de renderizado:

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  // ...
}

Valores reactivos como estos pueden cambiar debido a un re-renderizado. Por ejemplo, el usuario puede editar el message o elegir un roomId diferente en un desplegable. Los controladores de eventos y Efectos responden a los cambios de manera diferente:

• La lógica dentro de los controladores de eventos no es reactiva. No se ejecutará de nuevo a menos que el usuario vuelva a realizar la misma interacción (por ejemplo, un clic). Los controladores de eventos pueden leer valores reactivos sin «reaccionar» a sus cambios.
• La lógica dentro de los Efectos es reactiva. Si tu Efecto lee un valor reactivo, tienes que especificarlo como una dependencia Luego, si una nueva renderización hace que ese valor cambie, React volverá a ejecutar la lógica de tu Efecto con el nuevo valor.

Volvamos al ejemplo anterior para ilustrar esta diferencia.

La lógica dentro de los controladores de eventos no es reactiva

Echa un vistazo a esta línea de código. ¿Esta lógica debería ser reactiva o no?

    // ...
    sendMessage(message);
    // ...

Desde la perspectiva del usuario, un cambio en el message no significa que quiera enviar un mensaje. Solo significa que el usuario está escribiendo. En otras palabras, la lógica que envía un mensaje no debería ser reactiva. No debería volver a ejecutarse solo porque el valor reactivo ha cambiado. Por eso pertenece al controlador de evento:

  function handleSendClick() {
    sendMessage(message);
  }

Los controladores de eventos no son reactivos, por lo que sendMessage(message) solo se ejecutará cuando el usuario pulse el botón Enviar.

La lógica dentro de los Efectos es reactiva

Ahora volvamos a estas líneas:

    // ...
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    // ...

Desde la perspectiva del usuario, un cambio en el roomId significa que quieren conectarse a una sala diferente. En otras palabras, la lógica para conectarse a la sala debe ser reactiva. Usted quiere estas líneas de código para «mantenerse al día» con el valor reactivo, y para ejecutar de nuevo si ese valor es diferente. Es por eso que pertenece en un Efecto:

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

Los Efectos son reactivos, por lo que createConnection(serverUrl, roomId) y connection.connect() se ejecutarán para cada valor distinto de roomId. Tu Efecto mantiene la conexión de chat sincronizada con la sala seleccionada en ese momento.

Extraer lógica no reactiva fuera de los Efectos

Las cosas se vuelven más complicadas cuando tu quieres combinar lógica reactiva con lógica no reactiva.

Por ejemplo, imagina que quieres mostrar una notificación cuando el usuario se conecta al chat. Lees el tema actual (oscuro o claro) de los accesorios para poder mostrar la notificación en el color correcto:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('¡Conectado!', theme);
    });
    connection.connect();
    // ...

Sin embargo, theme es un valor reactivo (puede cambiar como resultado del re-renderizado), y cada valor reactivo leído por un Efecto debe ser declarado como su dependencia Ahora tienes que especificar theme como una dependencia de tu Efecto:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('¡Conectado!', theme);
    });
    connection.connect();
    return () => {
      connection.disconnect()
    };
  }, [roomId, theme]); // ✅ Todas las dependencias declaradas
  // ...

Juegue con este ejemplo y vea si puede detectar el problema con esta experiencia de usuario:

Cuando el roomId cambia, el chat se reconecta como es de esperar. Pero como theme también es una dependencia, el chat también se reconecta cada vez que cambias entre el tema oscuro y el claro. Esto no es bueno.

En otras palabras, no quieres que esta línea sea reactiva, aunque esté dentro de un Efecto (que es reactivo):

      // ...
      showNotification('¡Conectado!', theme);
      // ...

Necesitas una forma de separar esta lógica no reactiva del Efecto reactivo que la rodea.

Declaración de un Evento de Efecto

Utiliza un Hook especial llamado useEffectEvent para extraer esta lógica no reactiva de su Efecto:

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('¡Conectado!', theme);
  });
  // ...

Aquí, onConnected se llama un Evento de Efecto. Es una parte de tu lógica de Efecto, pero se comporta mucho más como un controlador de evento. La lógica dentro de él no es reactiva, y siempre «ve» los últimos valores de tus props y estado.

Ahora puedes llamar al Evento de Efecto onConnected desde dentro de tu Efecto:

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('¡Conectado!', theme);
  });

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

Esto resuelve el problema. Ten en cuenta que has tenido que eliminar onConnected de la lista de dependencias de tu Efecto. Los Eventos de Efecto no son reactivos y deben ser omitidos de las dependencias. Verifica que el nuevo comportamiento funciona como esperas:

Puedes pensar que los Eventos de Efecto son muy similares a los controladores de eventos. La principal diferencia es que los controladores de eventos se ejecutan en respuesta a las interacciones del usuario, mientras que los Eventos de Efecto son disparados por ti desde los Efectos. Los Eventos de Efecto te permiten «romper la cadena» entre la reactividad de los Efectos y el código que no debería ser reactivo.

Leer las últimas propiedades y el estado con los Eventos de Efecto

Los Eventos de Efecto le permiten arreglar muchos patrones en los que podría verse tentado a eliminar el linter de dependencias.

Por ejemplo, digamos que tienes un Efecto para registrar las visitas a la página:

function Page() {
  useEffect(() => {
    logVisit();
  }, []);
  // ...
}

Más tarde, añades múltiples rutas a tu sitio. Ahora tu componente Page recibe una propiedad url con la ruta actual. Quieres pasar la url como parte de tu llamada logVisit, pero el linter de dependencias se queja:

function Page({ url }) {
  useEffect(() => {
    logVisit(url);
  }, []); // 🔴 Hook de React useEffect tiene una dependencia que falta: 'url'
  // ...
}

Piense en lo que quiere que haga el código. Usted quiere registrar una visita separada para diferentes URLs ya que cada URL representa una página diferente. En otras palabras, esta llamada a logVisit debería ser reactiva con respecto a la url. Por eso, en este caso, tiene sentido seguir el linter de dependencias, y añadir url como dependencia:

function Page({ url }) {
  useEffect(() => {
    logVisit(url);
  }, [url]); // ✅ Todas las dependencias declaradas
  // ...
}

Supongamos ahora que desea incluir el número de artículos en el carrito de compras junto con cada visita a la página:

function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  useEffect(() => {
    logVisit(url, numberOfItems);
  }, [url]); // 🔴 React Hook useEffect has a missing dependency: 'numberOfItems'
  // ...
}

Has utilizado numberOfItems dentro del Efecto, por lo que el linter te pide que lo añadas como dependencia. Sin embargo, no quieres que la llamada a logVisit sea reactiva con respecto a numberOfItems. Si el usuario pone algo en el carro de la compra, y el numberOfItems cambia, esto no significa que el usuario haya visitado la página de nuevo. En otras palabras, visitar la página es, en cierto sentido, un «evento». Ocurre en un momento preciso.

Divide el código en dos partes:

function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  const onVisit = useEffectEvent(visitedUrl => {
    logVisit(visitedUrl, numberOfItems);
  });

  useEffect(() => {
    onVisit(url);
  }, [url]); // ✅ Todas las dependencias declaradas
  // ...
}

Aquí, onVisit es un Evento de Efecto. El código que contiene no es reactivo. Por eso puedes usar numberOfItems (¡o cualquier otro valor reactivo!) sin preocuparte de que cause que el código circundante se vuelva a ejecutar con los cambios.

Por otro lado, el Efecto en sí sigue siendo reactivo. El código dentro del Efecto utiliza la propiedad url, por lo que el Efecto se volverá a ejecutar después de cada rerenderizado con una url diferente. Esto, a su vez, llamará al Evento de Efecto «onVisit».

Como resultado, se llamará a logVisit por cada cambio en la url, y siempre se leerá el último numberOfItems. Sin embargo, si numberOfItems cambia por sí mismo, esto no hará que se vuelva a ejecutar el código.

  const onVisit = useEffectEvent(() => {
    logVisit(url, numberOfItems);
  });

  useEffect(() => {
    onVisit();
  }, [url]);

  const onVisit = useEffectEvent(visitedUrl => {
    logVisit(visitedUrl, numberOfItems);
  });

  useEffect(() => {
    onVisit(url);
  }, [url]);

  const onVisit = useEffectEvent(visitedUrl => {
    logVisit(visitedUrl, numberOfItems);
  });

  useEffect(() => {
    setTimeout(() => {
      onVisit(url);
    }, 5000); // Retraso en el registro de visitas
  }, [url]);

function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  useEffect(() => {
    logVisit(url, numberOfItems);
    // 🔴 Evite suprimir el linter de este modo:
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [url]);
  // ...
}

import { useState, useEffect } from 'react';

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [canMove, setCanMove] = useState(true);

  function handleMove(e) {
    if (canMove) {
      setPosition({ x: e.clientX, y: e.clientY });
    }
  }

  useEffect(() => {
    window.addEventListener('pointermove', handleMove);
    return () => window.removeEventListener('pointermove', handleMove);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <label>
        <input type="checkbox"
          checked={canMove}
          onChange={e => setCanMove(e.target.checked)}
        />
        El punto puede moverse
      </label>
      <hr />
      <div style={{
        position: 'absolute',
        backgroundColor: 'pink',
        borderRadius: '50%',
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: 'none',
        left: -20,
        top: -20,
        width: 40,
        height: 40,
      }} />
    </>
  );
}

import { useState, useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [canMove, setCanMove] = useState(true);

  const onMove = useEffectEvent(e => {
    if (canMove) {
      setPosition({ x: e.clientX, y: e.clientY });
    }
  });

  useEffect(() => {
    window.addEventListener('pointermove', onMove);
    return () => window.removeEventListener('pointermove', onMove);
  }, []);

  return (
    <>
      <label>
        <input type="checkbox"
          checked={canMove}
          onChange={e => setCanMove(e.target.checked)}
        />
        El punto puede moverse
      </label>
      <hr />
      <div style={{
        position: 'absolute',
        backgroundColor: 'pink',
        borderRadius: '50%',
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: 'none',
        left: -20,
        top: -20,
        width: 40,
        height: 40,
      }} />
    </>
  );
}

Limitaciones de los Eventos de Efecto

Los Eventos de Efecto tienen un uso muy limitado:

• Llámalos solo desde dentro Efectos.
• Nunca los pases a otros componentes o Hooks.

Por ejemplo, no declares y pases un Evento de Efecto así:

function Timer() {
  const [count, setCount] = useState(0);

  const onTick = useEffectEvent(() => {
    setCount(count + 1);
  });

  useTimer(onTick, 1000); // 🔴 Evitar: Pasar Eventos de Efecto

  return <h1>{count}</h1>
}

function useTimer(callback, delay) {
  useEffect(() => {
    const id = setInterval(() => {
      callback();
    }, delay);
    return () => {
      clearInterval(id);
    };
  }, [delay, callback]); // Necesitas especificar "callback" en las dependencias
}

En su lugar, declare siempre los Eventos de Efecto directamente junto a los Efectos que los utilizan:

function Timer() {
  const [count, setCount] = useState(0);
  useTimer(() => {
    setCount(count + 1);
  }, 1000);
  return <h1>{count}</h1>
}

function useTimer(callback, delay) {
  const onTick = useEffectEvent(() => {
    callback();
  });

  useEffect(() => {
    const id = setInterval(() => {
      onTick(); // ✅ Bien: Solo se activa localmente dentro de un Efecto
    }, delay);
    return () => {
      clearInterval(id);
    };
  }, [delay]); // No es necesario especificar "onTick" (un evento de Efecto) como dependencia.
}

Los Eventos de Efecto son «piezas» no reactivas de tu código de Efecto. Deben estar junto al Efecto que los utiliza.