reactjsuse-effectnavigateurl

self navigate react page goes into infinite loop

Have control which navigate to same page with different values in url

Case 1 - Below code invokes useEffect infinite times after clicking navigate

const queryValues = queryString.parse(search);
const { trip } = queryValues;

useEffect(() => {
 console.log('Calling infinite times');
},[trip]));

Case 2 - If I change code to below then useEffect never call again any updates to url by clicking navigation button

useEffect(() => {
 const queryValues = queryString.parse(search);
 const { trip } = queryValues;
 console.log('Calling infinite times');
},[]));
Solution

  • You are missing the closing bracket in both useEffect cases.

    useEffect(() => {
 const queryValues = queryString.parse(search);
 const { trip } = queryValues;
 console.log('Calling infinite times');
},[])