Bug: Maximum update depth exceeded

[d07RiV]

React erroneously complains about setState calls when the application is doing enough work to keep the browser busy between updates.

React version: 18 & 19

Steps To Reproduce

1. Create a new project in Vite or any other build tool
2. Start dev server with following code

import { useEffect, useState } from 'react'
import './App.css'

function Display({ value }: { value: number }) {
  const [state, setState] = useState(0)
  useEffect(() => {
    // Adjust the loop length based on your system
    for (let i = 0; i < 100000000; ++i) { /* do nothing */ }
    setState(value)
  }, [value])
  return <div>Value: {state}</div>
}

function App() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    function frame() {
      setCount(c => c + 1)
      frameId = window.requestAnimationFrame(frame)
    }
    let frameId = window.requestAnimationFrame(frame)
    return () => {
      window.cancelAnimationFrame(frameId)
    }
  }, [])

  return (
      <Display value={count} />
  )
}

export default App

The current behavior

After a few seconds starts repeatedly printing this in console:

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

The expected behavior

There is no invalid useState calls as far as I'm aware?

[Harikrishnaselvam]

Everytime the setState runs the component is
rerendered and goes on on a infinite loop. Maybe
you can use useMemo hook? So the setState
does not run on every rerender??

[wintercounter]

@Harikrishnaselvam No, this is a false positive error. The effect is only running once, and it was introduced recently, probably with the devtools update. We're also experiencing the same calling setState in a requestAnimationFrame, and we do need all those setState calls to update the UI. Could be done differently? Yes, but that won't change the fact that the error is a false positive that wasn't an error before.

[d07RiV]

In my case this is something specific to rendering being expensive enough that it somehow confuses itself into thinking that there's recursion going on. In my real case, I have a somewhat complex component that's updated on every frame (sorry, I need the animation), and one of its parts uses setEffect for a simple operation.

[ablamunits]

Out of curiosity, as my team experienced something similar recently - what happens if you replace your useState() with useReducer() ?