Hice este gancho personalizado para obtener el ancho de la ventana. Está funcionando pero tengo una pregunta. useEffect para agregar un detector de eventos a la window en el montaje del componente. Pero luego mi amigo me sugirió que usara la función de return para eliminar el detector de eventos. ¿Cómo funciona esto? ¿La función devuelta no debería destruir el detector de eventos y hacer que no funcione? ¿Ya que esto está sucediendo una vez en el montaje del componente?
import React from "react"; const useWindowSize = () => { const [windowSize, setWindowSize] = React.useState({ width: window.innerWidth, height: window.innerHeight, }); const windowResize = () => { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); }; React.useEffect(() => { window.addEventListener("resize", windowResize); return () => { window.removeEventListener("resize", windowResize); }; }, []); return windowSize; }; export default useWindowSize;La función devuelta dentro de useEffect se ejecuta justo antes de que se desmonte su componente. No se ejecuta en el montaje.
Sin esta función devuelta, cada vez que su componente se vuelve a renderizar, si no tuviera esa dependencia de matriz vacía, y cuando se desmonta y se monta, se agrega un nuevo EventListener en la memoria (lo cual es malo).
Esta devolución de llamada a cambio de useEffect se llama en unmount . Lo que significa que eventListener se elimina cuando su componente ya no se procesa, o cuando se "vuelve a montar" (se cambió la propiedad clave). Esto es importante porque sin eliminar el detector de eventos, habrá varios detectores de eventos iguales enganchados al mismo tiempo.
¿No debería devolver la función destruir el detector de eventos y hacer que no funcione? ya que esto está sucediendo una vez en el montaje del componente?
La función de retorno se ejecutará en su caso cuando el componente que usa el gancho se desmonte (debido a la matriz vacía como dependencias). Así que en ese momento tiene sentido anular el registro del oyente, supongo. Máslectura .