Tengo el siguiente fragmento de código en el que recibo dos advertencias:
Advertencia: no se puede realizar una actualización de estado de React en un componente desmontado. Esto no es operativo, pero indica una pérdida de memoria en su aplicación. Para solucionarlo, cancele todas las suscripciones y tareas asincrónicas en una función de limpieza useEffect.
unmountComponentAtNode(): el nodo que está intentando desmontar fue generado por otra copia de React.
import React, { useState, useEffect } from "react"; import GravatarList from "./GravatarList"; import Header from "./Header"; import { calculateNumberOfImages } from "./utils"; const App = () => { const handle = () => { setState({ images: calculateNumberOfImages() }); } useEffect(() => { return () => { window.removeEventListener('resize', () => handle()) window.removeEventListener('scroll', () => handle()) } }, []) const [state, setState] = useState(() => { window.addEventListener("scroll", () => handle()); window.addEventListener("resize", () => handle()); return { images: calculateNumberOfImages() }; }); return ( <div> <Header /> <GravatarList state={state} /> </div> ); }; export default App; Parece que no puedo darme cuenta de lo que estoy haciendo mal porque ya he borrado los oyentes en useEffect .
El problema aquí es que las devoluciones de llamada de eventos que está tratando de eliminar no son las mismas devoluciones de llamada que agregó al principio. El problema se debe a que está utilizando funciones anónimas para llamar al estado de actualización de la función.
Tampoco debe usar la función de inicializador de estado para hacer efectos secundarios como agregar detectores de eventos.
Mueva la devolución de llamada del handle y la adición de detectores de eventos al gancho de montaje useEffect . Pase la referencia de devolución de llamada del handle a las funciones de agregar/eliminar,
const App = () => { const [state, setState] = useState(() => ({ images: calculateNumberOfImages() })); useEffect(() => { const handle = () => { setState({ images: calculateNumberOfImages() }); }; window.addEventListener("scroll", handle); window.addEventListener("resize", handle); return () => { window.removeEventListener('resize', handle); window.removeEventListener('scroll', handle); } }, []); return ( <div> <Header /> <GravatarList state={state} /> </div> ); };