is it possible to cancel the subscription from a setCounter with a cleanup function in useEffect hook?

0
votes

I did simple animation with a setTimeout but I'm getting a red warning in the console:

1 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. in Home (created by Context.Consumer)

  useEffect(() => {
    counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
    if (counter <= 16 && counter > 8) {
      setFlexStyle({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "list-item",
      });
      setClassStyle("flex-active-slide");
      setFlexStyle2({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "none",
      });
      setClassStyle2("");
    } else if (counter <= 8 && counter > 0) {
      setFlexStyle({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "none",
      });
      setClassStyle("");
      setFlexStyle2({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "list-item",
      });
      setClassStyle2("flex-active-slide");
    } else {
      setCounter(16);
    }
  }, [counter]);
1
reactjsreact-hooksuse-effect
Just return a function from useEffect for cleanup. Have a look at this: reactjs.org/docs/hooks-effect.html#example-using-hooks-1 – Utsav Patel

1 Answers

1
votes
useEffect(() => {
  const timer = counter > 0 ? setTimeout(() => setCounter(counter - 1), 1000) : null
  return () => clearTimeout(timer)
}, [counter] )

Give this a try