Can't perform a React state update on an unmounted component.

Hello,

So I’m having an issue with receiving a state update error on my component with the useCounter hook.

Here’s the class:

const SavingsCounter = ({ classes }) => {
  let timerId = null;

  const getCurrentMoneySaved = () => {
    // returns number
  };

  const { countUp, update } = useCountUp({
    start: getCurrentMoneySaved() - 245,
    end: getCurrentMoneySaved(),
    duration: 8,
    separator: ',',
    onReset: () => console.log('Resetted!'),
    onUpdate: () => console.log('Updated!'),
    onPauseResume: () => console.log('Paused or resumed!'),
    onStart: ({ }) => console.log('start'),
    onEnd: ({ }) => console.log('end'),
  }, []);

  const updateCounter = () => {
    update(getCurrentMoneySaved());

    // random timeout in 10 - 20 seconds
    timerId = setTimeout(updateCounter, random(10000, 20000));
  };

  useEffect(() => {
    updateCounter();

    return function cleanup() {
      clearTimeout(timerId);
    };
  }, []);

  return (
    <div className={classes.savingsWrapper}>
      <Media query="(max-width: 960px)">
        {
          (matches) => {
            const menu = matches ? (
              <>
                <Typography variant="h4" color="inherit">
                  $
                  { countUp }
                </Typography>
                <Typography variant="h5" color="inherit">
                   Saved in Commissions
                </Typography>
              </>
            ) : (
              <>
                <Typography variant="h5" color="inherit">
                Clever has saved homeowners
                </Typography>
                <Typography variant="h4" color="inherit">
                  $
                  { countUp }
                </Typography>
                <Typography variant="h5" color="inherit">
                  in commissions and counting.
                </Typography>
              </>
            );
            return menu;
          }
        }
      </Media>
    </div>
  );
};

Every time I leave the page I get the “state update on an unmounted component” error and then the logs: end end

It seems like something is holding onto a reference of the component and doing an update after the page is unmounted. I couldn’t find any way to unsubscribe from anything in react count up, and I’m canceling the timer I have set.

I’m using reach router if it makes any difference.

Thanks!

[reakaleek]

Hi @bargangilo thank you for reporting this issue. I already created a pull request, which will fix the problem. We just need to wait for @glennreyes to publish the fix.

[ghost]

Hi, sorry to resurrect this issue but I’m experiencing it on the latest version.

component is essentially

const MyComponent = () => {
  const value = useSelector(MySelector)
  const { countUp, update } = useCountUp({ start: value, end: value, duration: 0.75 })

  useEffect(() => {
    update(value)
  }, [update, value])

  return <div>{countUp}</div>
}

I’ve tried some silly things like wrapping update in a setTimeout and clearing in the return, and just returning the reset function, but neither worked.

delay properties need to be set to a suitable value