React-Error：重新渲染太多。 React 限制渲染次数以防止无限循环

Question

I'm coming up with an error,

Error: Too many re-renders. React limits
the number of renders to prevent an infinite loop.

on a function that GETS api data from axios. This is the first time this error is showing up for me.

The errors show up when I'm loading the page.

The culprit might be in this useEffect according to react.

useEffect(() => {
  axiosInstance.get('all/buckets/').then((res) => {
    const allBuckets = res.data;
    setAppState({ loading: false, buckets: allBuckets });
    console.log(res.data);
  });
}, [setAppState]);

Here the complete component:

export default function GetUserBuckets() {
  const classes = useStyles();
  const ListLoading = LoadingComponent(UserBuckets);
  const [appState, setAppState] = useState({
    loading: true,
    posts: null,
  });

  useEffect(() => {
    axiosInstance.get('all/buckets/')
      .then((res) => {
        const allBuckets = res.data;
        setAppState({
          loading: false,
          buckets: allBuckets,
        });
        console.log(res.data);
      });
  }, [setAppState]);

  return (
    <div className={classes.text}>
      <h1>Buckets</h1>
      <ListLoading
       isLoading={appState.loading}
       buckets={appState.buckets}
      />
      <Container className={classes.createBucket}>
        <CreateDialog />
      </Container>
    </div>
  );
}

The error is also very inconsistent, it sometimes appears and sometimes it does not, based on the user requesting the data. It could be a backend issue, but currently trying to see if I can tidy up my useEffect better to fix this issue.

Thank you for any help.

Answer 1

Consider not passing setAppState as a dependency to your useEffect hook.

Just use an empty array, so that it only runs once when your GetUserBuckets component is mounted.

Refactor your useEffect to look like this

useEffect(() => {
  axiosInstance.get('all/buckets/').then((res) => {
    const allBuckets = res.data;
    setAppState({ loading: false, buckets: allBuckets });
    console.log(res.data);
  };
}, []); // Removed the setAppState here