Escuchas de eventos y ganchos de React

Problema: Cuando se utilizan ganchos de React y detectores de eventos, el registro de la consola de estado muestra información incorrecta.

Descripción del problema

Considere el CodeSandbox proporcionado: https://codesandbox.io/s/lrxw1wr97m. Cuando hace clic dos veces en el botón "Agregar tarjeta" y luego hace clic en "Botón1" en la primera tarjeta, la consola muestra correctamente el estado con dos tarjetas. Sin embargo, si hace clic en "Botón2" en la misma tarjeta (que es manejada por un detector de eventos), la consola muestra incorrectamente solo una tarjeta en el estado.

Razón del estado incorrecto

El El problema surge del diferente tratamiento de los controladores de eventos en los componentes CardsProvider y Card. Los controladores de eventos definidos dentro del componente funcional CardsProvider, handleCardClick y handleButtonClick, se redefinen cada vez que se representa el componente. Esto significa que se refieren al estado en el momento en que se definen, que puede quedar obsoleto cuando se activa el detector de eventos.

Por otro lado, el componente Card usa useRef para registrar el detector de eventos, que persiste durante todo el ciclo de vida del componente. Como resultado, la función de escucha de eventos se refiere al estado en el momento en que se montó el componente, que está obsoleto.

Solución: uso de la función de actualización de estado

Una solución es utilizar un actualizador de estado función que recibe el estado nuevo como argumento, en lugar de depender del estado obsoleto del alcance adjunto:

const eventListener = () => {
  // Function receives fresh state
  setState(freshState => freshState   1);
};

// Event listener is registered using `useEffect` to ensure it is only registered once
useEffect(() => {
  // Register event listener
  // ...

  // Unregister event listener on component unmount
  return () => {
    // ...
  };
}, []);

En este escenario, el detector de eventos recibe el estado nuevo, eliminando el problema con los datos obsoletos. Sin embargo, es importante tener en cuenta que la función de actualización de estado puede devolver el mismo estado para evitar actualizaciones innecesarias. Utilice console.log dentro de la función de actualización de estado para observar los cambios de estado.

Otras soluciones

Las formas alternativas de abordar este problema incluyen:

• Mutable Estado: Usando useRef en lugar de useState.
• Re-registro manual de escucha de eventos: Re-registro el detector de eventos cada vez que cambia el estado.
• Manejo de eventos integrado: Uso del manejo de eventos integrado de React en lugar de detectores de eventos personalizados.