Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked

This was a really hard one for me to track down.

What it came down to: This would only occur when I was running on a low spec device (Galaxy A12). I had a hook that looked like this:

  const [state, setState] = useState(1);
  useEffect(() => {
    const t = setInterval(
      () => setState(valueGoesHere),
      200,
    );
    return () => clearInterval(t);
  }, []);

To poll a value.

This worked fine on higher spec'd phones but it caused the excessive promise issue. You should comb your code for anything like the above snippet, especially using setInterval as it will bank up promises and not allow prior ones time to finish before dispatch.

It seems that the issue was that an async function was being executed in a loop. The loop was firing off lots of async calls almost simultaneously which resulted in excessive number of pending callbacks.

I had this issue with an async function inside a useEffect() while the my device was running debug mode (connected to a debugger). I resolved the issue by disconnecting the debugger.

It seems that the issue when I remove [] from useEffect

React.useEffect(() => { ...do somethings }, []);

and it work when I added it back