React - error in useEffect(). does dat make everything on page go in infinite loop?

Question

I've converted all my class components to functional components. Now, when I change some code in the IDE during development my page goes in an infinite loop. I'm almost certain one on my useEffect() hooks has an mistake (or missing) conditional firing variable. But it would take some time to figure out which one.

So, my question is. Is there an easy way to figure out which one is broken that would cause the loop. And would it also loop after build, or only in development?

As requested a code example. It is very basic since I have about 20 using this principle.

import React, {useEffect} from "react";

const Layout = ({ data }) => {
  useEffect(() => {
    // some jQuery stuff
  }, [data.myConditionalVar])

  return (
    <div>
     // my stuff
    </div>
  )
}

Answer 1

useEffect gets called every time the second argument you pass is changed. In your case it is data.myConditionalVar .

So, I am assuming inside useEffect you are updating the data using jquery which forces React to call the useEffect again resulting in a never-ending loop.