Hi everyone,
Sorry to revive this not so old topic, I have a similar problem but with React hooks,
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 pretty new to React and I'm not sure what I can do to clean the gsap process.
I'm using gsap in two useEffects to drive simultaneously a countdown (in seconds going down) and a loading bar (in percent going up)
I tried the following :
///// COUNTDOWN /////
const [countdown, setCountdown] = useState(props.seconds);
const proxyCount = useRef({ countdown });
useEffect(() => {
gsap.to(proxyCount.current, {
countdown: 0,
duration: props.seconds,
ease: "linear",
overwrite: "auto",
onUpdate: () => {
setCountdown(proxyCount.current.countdown);
}
});
return function cleanup() {
gsap.killTweensOf(proxyCount, "countdown");
};
}, [setCountdown]);
///// PERCENT /////
const [percent, setPercent] = useState(0);
const proxy = useRef({ percent });
useEffect(() => {
gsap.to(proxy.current, {
percent: 100,
duration: props.seconds,
ease: "linear",
overwrite: "auto",
onUpdate: () => {
setPercent(proxy.current.percent);
}
});
return function cleanup() {
gsap.killTweensOf(proxy, "percent");
};
}, [setPercent]);
I thought that would be it but gsap.killTweensOf, either with or without the 2nd argument ( "countdown" / "percent" ) doesn't seem to fix it.
I'm not using timelines yet so I wondered if anyone has an alternative to the t1.kill() here.
Thanks in advance !
Julien