Question 167720 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – useEffect causing infinite loop with data population from DB

I am passing data from a db load query into my script, and having a useEffect to update the existing data.
This is for some reason causing the UE to run infinitely.
useEffect as follow, with it called by the array of data that comes from the DB.

useEffect(()=>{
    console.log("UE1"); // running on infinite loop. TODO: DEBUG. 
    setCircles(paramsObject?.circles)
}, [paramsObject])

Updating this useState with circle elements (svg):

//ocircles created/creating
const [circles, setCircles] = useState([]);

I am unsure what to try as this useEffect is essential to loading data and using it as the current data state for the page.

Here is more code for context:

//CIRCLES ARRAY const [circles, setCircles] = useState([]);  
const { id } = useParams(); 
const { data } = useQuery(LOAD_DATA);   
const loadedData = data?.params.find(element => id === element._id); const loadedID = loadedData?._id; 
const paramsObject = JSON.parse(loadedData?.params || '{}');

useEffect(()=>{         
setCircles(paramsObject?.circles) 
},[paramsObject]
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have worked the simple solution.. it may be a bandaid..

    But, i simply changed the useEffect call to be:

    [array.length] rather than [array]


  2. 0 
    const loadedData = data?.params.find(element => id === element._id);

    The search result is recalculated after each rerender, a new array reference is created because of this, each time a new reference to the paramsObject is obtained.

    In total it turns out that you do setState in useEffect and start the rerender process, the reference to the variables mentioned above changes, useEffect works again and so on in a circle

    You can wrap everything in useMemo but that’s not the best solution.
    I can’t see all your code, so I can’t write a ready-made solution, but I can advise you to rewrite useEffect so that it only updates when the id changes

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search