useEffect is the most misused hook in React. Most of the time the bug isn't obvious: the component looks fine, until your API gets hammered or the wrong user's data shows up on screen.

I took four common mistakes, ran each one in real React 19 (rendered with react-dom in a simulated browser), and counted what actually happens. Here are the results and the fix for each.

Prefer video? Here's the 3-minute version:

Mistake 1: an object in the dependency array → infinite loop

function UserList ( ) { const [ users , setUsers ] = useState ( [ ] ) ; const filters = { active : true } ; // new object every render!

useEffect ( ( ) => { fetchUsers ( filters ) . then ( setUsers ) ; } , [ filters ] ) ;

return < p > { users . length } users </ p > ; }

Enter fullscreen mode

Exit fullscreen mode

React compares dependencies by reference . Every render creates a brand-new filters object, so React thinks it changed.…