react: Provide a way to detect infinite component rendering recursion in development

//Custom hook_1
const useRenderCount = () => {
  // src: https://medium.com/better-programming/how-to-properly-use-the-react-useref-hook-in-concurrent-mode-38c54543857b
  const renderCount = useRef(0);
  let renderCountLocal = renderCount.current;
  useEffect(() => {
    renderCount.current = renderCountLocal;
  });
  renderCountLocal++;
  return renderCount.current;
};

//Custom hook_2 (We just need this, we'll call the other one implicitly).
const useStopInfiniteRender = (maxRenders) => {
  const renderCount = useRenderCount();
  if (renderCount > maxRenders)  throw new Error('Infinite Renders limit reached!!');
};

And using that custom hook in a react component like,

  const App () => {

  useStopInfiniteRender(10); //This works great for me, but it'll throw error at 11th render. 
  // You may set it to your need like 10000 is a good number.

  //...more code..
  }

Honestly I think it really is effictively just a more roundabout form of your second example. It’s easy to see when it’s like that, but it gets more difficult to diagnose when you have used 3 or 4 HOCs on top of otherwise unrelated components that then happen to call each other.

I guess what I’m requesting here is really just some sort of measure to detect this and throw an error, and break out of that loop somehow, so recursive issues such as this can be diagnosed easier, much like how you handle too many setState calls occurring too close together.

Is there something specific to context here? I guess you’d have a similar problem if you rendered a component that recursively renders itself?

It would also probably be possible to detect if the same component is rendered within itself with the same props (and no context providers in between) - potentially with a recursion depth check as well, if the props comparison would be too expensive alone.

Was also surprised today to find that this didn’t cause a warning or stack overflow of any kind, just a freeze (with findStrictRoot at 80% in the profiler).

One could also argue that if your component tree is, say, 10000 nodes deep, your app probably isn’t working very well anymore…

I struggled to debug my infinite loop because the chrome tab would crash (which took ages to close and reload) and the component tree wouldn’t render (to display why the loop was happening). A helpful tip to get round these two issues is to use the following:

if (Math.random() < 0.2) return "infinite loop ended here";

It’s not necessarily what you’re looking for, but I find the npm package “why did you update” to be useful in identifying unnecessary rerenders.

I’m just struggling to see how #12515 or this is different from just

function Child() {
  return <Child />;
}

or

function A() {
  return <B />;
}

function B() {
  return <A />;
}

Just bumped into this, too - the cause of the issue is ridiculously simple but it’s very hard to debug due to the unclear freeze.

Sure as mentioned, theoretically there’s no way to detect an infinite loop. But in practice you could set it to stop and output an error when the recursion depth reaches some very high value - just like vanilla JS does. Or if stopping is not acceptable, at least output a warning when in development and strict mode.

I find it surprising that React gets stuck indefinitely when it encounters infinite recursion whereas JS itself prevents it.

For example, the following crashes almost immediately with Uncaught InternalError: too much recursion on Firefox:

const f = () => f();

f();

On the other hand, the following just freezes the browser tab:

const F = () => <F />;

ReactDOM.render(<F />, document.getElementById("root"));

I wonder if there’s a way to make React’s behaviour consistent with plain function calls somehow? Surely nobody uses React trees with more than 10,000 levels of depth 😃

This is basically the halting problem, a program cannot be created that will determine if another program will ever stop running. However, you can set some form of counter and after so many iterations halt a program.

I don’t think it is a something that should be added as it’s the same idea across all programming languages, if you keep calling a function infinitely, your program will run infinitely.

What would be the desired solution here; keep track of how deep components have nested during rendering and abort with message when it’s too deep? (200? 500?)

I think the issue is technically unrelated to context, though it seems to be easier to run into with the new context API. Is there any built in safeguard to prevent too much recursion or would a check for this be easy to add at least for debugging purposes?

@gaearon Is it the same issue I post it before two days? here? https://github.com/facebook/react/issues/12515