reactjs - Uncaught Invariant Violation: Too many re-renders

Question

I'm fetching the data from API's but it causes too many re-renders.Needed help to control this behavior.

  useEffect(() => {
    fetchAdDetails(props.match.params && props.match.params.id);
    getAllReviews(props.match.params && props.match.params.id);
  
  }, [props.match.params.id, getAllReviews, fetchAdDetails]);

question from:https://stackoverflow.com/questions/65885699/uncaught-invariant-violation-too-many-re-renders

Answer 1

You could do the following:

useEffect(() => {
    fetchAdDetails(props.match.params && props.match.params.id);
    getAllReviews(props.match.params && props.match.params.id);
  
  }, []);

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run.

https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects