javascript - How to prevent infinite re-rendering with useEffect() in React

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65856539/how-to-prevent-infinite-re-rendering-with-useeffect-in-react

Answer 1

You can add a condition in the call back function that checks if a certain condition is met, e.g. if data is empty. If it is empty, then fetch data, otherwise do nothing. This will prevent the infinite loop from happening.

const getData =  useEffect(()=>{
  const fetchData = () => {
    UserService.getUserById(localStorage.getItem("userId"))
     .then(res => {
        if (res.data !== null) {
         setData(res.data.todos)
        }
      })
     .catch(error => {
        // do something with error
      })
  }
  
  if (data.length === 0) 
    fetchData()

},[data]);

Alternatively, you use an empty dependency array so that the callback function in the useEffect is called once.