[에러해결] Can't perform a React state update on an unmounted component

 

https://norwayy.tistory.com/m/370

이슈 해결 - Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in

 

useState를 통해서 currentStep과 setStep을 사용하는데, 컴포넌트가 unmounted 되었을 때 setStep()이 동작하면 나타나는 에러이다.

 

mounted라는 변수를 true로 만들고, 컴포넌트가 unmount될 때는 mounted 값을 false로 바꿔주고, setStep() 함수는 mounted가 true 값일 때만 동작하도록 코드를 변경해주면 된다

const Sample = () => {
  const [currentStep, setStep] = useState<number>(0);

  useEffect(() => {
    // 컴포넌트의 mounted 여부를 check하기 위해 변수설정 (에러해결)
    let mounted = true;
    const sections = gsap.utils.toArray(
      outerDivRef2.current.querySelectorAll(".background")
    );

    const timeline = gsap.timeline({
      scrollTrigger: {
        trigger: outerDivRef2.current,
        start: "top top",
        end: "+=500%",
        scrub: 1,
        pin: true,
        invalidateOnRefresh: true,
        onUpdate: (self) => {
          self.isActive &&
            setSection(Math.ceil(self.progress * sections.length) - 1);
        },
      },
    });

    function setSection(index: number) {
      // mounted 상태일 때 setStep을 실행할 수 있다
      if (mounted) {
        setStep(index);
        const anotherItems = sections.filter((item, i) => {
          return i != index;
        });
        gsap.killTweensOf(anotherItems);
        gsap.to(anotherItems, { autoAlpha: 0, duration: 1 });
        gsap.to([sections[index]], { autoAlpha: 1, duration: 1 });
      }
    }

	// 컴포넌트가 unmount될 때 false 값으로 바꿔줌
    return () => {
      mounted = false;
      };
    }, []);
  
  	return ()
  }
  ;