Memory Leak in React component using useEffect

Question

Im doing a Carrousel that when it opens a "news" you can see a description in a modal, that works perfect, but when you click on a offer you redirect to another page with the info about that product.

It's working but when you do it, in the consolo shows the error of memory leak "react-dom.development.js:67 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function."

I'm knew using useEffect and I don't know how to avoid this.

Thanks for your time

This is the "AxiosCollection"

import axios from "axios";
const baseURL = "http://localhost:8080";

function AxiosGetData(url, setData) {
  axios
    .get(`${baseURL}${url}`, {
      headers: {
        "Content-type": "application/json",
      },
    })
    .then((response) => {
      setData(response.data);
    })
    .catch((error) => {
      return error;
    });
}

export {
  AxiosGetData
};

import React, { useState, useEffect } from "react";
import { AxiosGetData } from "../AxiosCollection/AxiosCollection";
import Modal from "../Modal/Modal";
import { Link } from "react-router-dom";

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.min.css";

import BenefitCard from "../";

//Css file
import "./Slider.css";

// import Swiper core and required modules
import SwiperCore, { Pagination, Navigation } from "swiper";

// install Swiper modules
SwiperCore.use([Pagination, Navigation]);

const Slider = () => {
  //state to populate with featured object from API
  const [featured, setFeatured] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const [featuredById, setFeaturedById] = useState();  
  const onCloseRequest = () => setIsOpen(false);

  // hook to fetch data with Axios,it only runs once, takes an url and a function as params
  
  const handleClick = (item) => {
    AxiosGetData(`/jp-coin/featured/${item.featuredId}`, setFeaturedById);
    setIsOpen(true);
  };
  
  useEffect(() => {
    AxiosGetData("/...", setFeatured);
    
  }, []);

  return (
    <Swiper
      slidesPerView={1}
      spaceBetween={30}
      slidesPerGroup={1}
      loop={true}
      loopFillGroupWithBlank={true}
      pagination={{ clickable: true }}
      navigation={true}
      breakpoints={{
        768: {
          slidesPerView: 3,
          spaceBetween: 30,
          slidesPerGroup: 3,
        },
      }}
      className="mySwiper"
    >
      {featured.map((item) => (
        <SwiperSlide key={item.featuredId} onClick={() => handleClick(item)}>
          <Link to={item.type === "offer" ? `/jp-coin/offers/${item.featuredId}` : "/"}>
            <BenefitCard benefit={item} />
          </Link>
        </SwiperSlide>
      ))}
      {featuredById && featuredById.type === "news" && (
        <>
          <Modal
            isOpen={isOpen}
            onCloseRequest={onCloseRequest}
            className="slider__modalContainer"
          >
            <img src={featuredById.image} alt={featuredById.title} />
            <h1 className="slider__modalTitle">{featuredById.title}</h1>
            <p className="slider__modalDescription">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic
              blanditiis aperiam fuga ex, ratione recusandae ut harum, nam
              doloremque veniam necessitatibus, fugiat delectus placeat possimus
              totam sequi. Minus, at vitae.
            </p>
          </Modal>
        </>
      )}
      ;
    </Swiper>
  );
};

export default Slider;

Robert Hovhannisyan · Accepted Answer · 2022-02-10 07:41:32Z

That happens, because you're trying to update state asynchronously, and the update could happen when the component is unmounted.

You can keep a ref that will check if the component is mounted or not like in the code below.

Because I can't see the implementation of the AxiosGetData, you can just check is that ref is true, when you will consume the promise from the axios.

  const isMountedRef = useRef();
  
  useEffect(() => {
    isMountedRef.current = true
    // In your async function check is the isMountedRef is true or not
    AxiosGetData("/jp-coin/featured", setFeatured);
    
    return () => { isMountedRef.current = false }
  }, []);

For example, using the regular fetch, you could achieve it like this:

  const isMountedRef = useRef();
  
  useEffect(() => {
    isMountedRef.current = true;

    fetch('someAPIDomain').then(data => {
      isMountedRef.current && setState(data);
    });

    return () => { isMountedRef.current = false }
  }, []);

Alex · Accepted Answer · 2022-02-09 22:26:29Z

2

I think your issue may be coming from handleClick and not useEffect. When you click on any of your items (regardless if it has type "news" or "offer") your click handler will call AxiosGetData and then try to perform state updates (setFeatureById and setIsOpen) to show the modal. But for "offer" items you are also redirecting to a detail page, so your Slider component becomes unmounted before the state updates can occur which is probably why you are getting the memory leak warning. If you want to prevent state updates from happening for "offer" items you can change handleClick to:

  const handleClick = (item) => {
    if (item.type === 'news') {
      AxiosGetData(`/jp-coin/featured/${item.featuredId}`, setFeaturedById);
      setIsOpen(true);
    }
  };

edited Feb 9, 2022 at 22:26

answered Feb 9, 2022 at 20:45

Alex

816 bronze badges

Collectives™ on Stack Overflow

Memory Leak in React component using useEffect

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related