React Carousel memory leak issue (I cannot get first selected value from list)

Question

In my project, I listed map images through react carousel component and show its name in motion div to add some animation.

I have an problem about getting displayName value from map list.

When I remove motion.div, it works. It also works when I add this div during run time.

When I refresh the page, I get an error message.

Here is my error message shown below.

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.

How can I fix my issue?

Here is my MapList Component shown below.

const MapList = () => {
  const { maps } = useContext(APIContext);

  const [selected, setSelected] = useState(0);
  
  const handleChange = (selectedIndex) => {
    setSelected(selectedIndex);
  };

  useEffect(()=>{
    handleChange(selected)
  }, [selected])

  const variants = {
    show: {
      opacity: 1,
      y: 0,
      transition: {
        ease: "easeOut",
        duration: 0.5,
      },
    },
    hide: {
      y: 50,
      opacity: 0,
    },
  };

  return (
    <div className={styles.mapList}>
      <Carousel
            infiniteLoop
            showStatus={false}
            showThumbs={false}
            dynamicHeight={false}
            swipeable={true}
            onChange={handleChange}
          >
            {maps?.map((map, index) => (
              <img className='carouselImage' src={map.splash} alt='carouselImage' key={index}></img>
            ))}
      </Carousel>
      <motion.div 
        className={styles.mapInfo}
        key={selected}
        variants={variants}
        animate={"show"}
        initial="hide"
      >
        <p className={styles.mapName}>{maps?.[selected].displayName}</p>
      </motion.div>
    </div>
  )
}

export default MapList;

score 1 · Accepted Answer · answered Feb 12 '22 at 20:18

1

You should clean up your useEffect.

const MapList = () => {
  const { maps } = useContext(APIContext);
  
  const [selected, setSelected] = useState(0);
  
  const handleChange = (selectedIndex) => {
    setSelected(selectedIndex);
  };

  useEffect(()=>{
  let isMounted = false;
  if(!isMounted){
  handleChange(selected)
  }
    return () => (isMounted=true)
  }, [selected])

  const variants = {
    show: {
      opacity: 1,
      y: 0,
      transition: {
        ease: "easeOut",
        duration: 0.5,
      },
    },
    hide: {
      y: 50,
      opacity: 0,
    },
  };

  return (
    <div className={styles.mapList}>
      <Carousel
            infiniteLoop
            showStatus={false}
            showThumbs={false}
            dynamicHeight={false}
            swipeable={true}
            onChange={handleChange}
          >
            {maps?.map((map, index) => (
              <img className='carouselImage' src={map.splash} alt='carouselImage' key={index}></img>
            ))}
      </Carousel>
      <motion.div 
        className={styles.mapInfo}
        key={selected}
        variants={variants}
        animate={"show"}
        initial="hide"
      >
        <p className={styles.mapName}>{maps?.[selected].displayName}</p>
      </motion.div>
    </div>
  )
}

export default MapList;

answered Feb 12 '22 at 20:18

Mani Yeganeh

61
1

I used your code but I still got the same issue. My issue is in this part (maps?.[selected].displayName) . It throws this message Cannot read properties of undefined (reading 'displayName') but displayName is a property of a Map object. The issue is related with the selected value (maps?.[selected].displayName). – S.N Feb 12 '22 at 20:27
ManiYeganeh How can I revise useEffect method? – S.N Feb 12 '22 at 20:44
How can I get displayName? – S.N Feb 12 '22 at 20:58
You can get displayName by writing maps[selected]?.displayName – Mani Yeganeh Feb 12 '22 at 21:04
I also used it but I got an error which I mentioned before. – S.N Feb 12 '22 at 21:09
I think problem is from your state and change function. Because of useEffect dependency every time state changed component will re-render – Mani Yeganeh Feb 12 '22 at 21:20
I cannot use other way to get selected value. How can I fix my state and change function? – S.N Feb 12 '22 at 21:22

React Carousel memory leak issue (I cannot get first selected value from list)

1 Answers1