I am writing a React page that displays a list of quizzes that is being fetched by an external API. At the same time, my page has a "New Quiz" button which opens up a dialog with a form for the user to configure and create a new quiz.

Here is the issue: I am not sure how I can make my table re-render once the POST request is completed. After playing around with the 2nd argument of useEffect() for a bit, I am ultimately faced with 2 scenarios:

1. Table re-renders after POST, but useEffect goes into infinite loop
2. useEffect does not go into infinite loop, but table does not re-render

Here is my code:

   const handleSubmit = () => {
    setLoading(true);

    const body = {
      name: newQuizName,
      collectionId: newQuizCollection,
      length: newQuizLength,
      estimator: newQuizEstimator,
      survey: newQuizSurvey
    }

    axios.post(quizzes_api, body).then(res => console.log(res));
    fetchQuizzes();
    resetDialog();

    setLoading(false);
   }

   const quizzes_api = `http://localhost:5000/quizzes`;
   const pools_api = `http://localhost:5000/pools`;

   const fetchQuizzes = () => {
     axios.get(quizzes_api).then(res => setQuizzes(res.data));
   }

   const fetchPools = () => {
     axios.get(pools_api).then(res => setPools(res.data))
   }

   useEffect(() => {
     fetchQuizzes();
     fetchPools();
   }, [])

Since the 2nd argument used here is [], it is the version that does not re-render. I have tried putting [quizzes], which solves the issue on the front-end; but my flask server gets flooded with GET requests.

I will also note that this is very similar to the question in this thread: React useEffect caused infinite loop

However, I am not able to solve the problem with the solution offered over there.

Any insights will be greatly appreciated.

EDIT: For future readers who may encounter this same issue and be confused between async/await VS Promise.then() behavior like myself (I thought they can be used interchangeably), this reference may be helpful: https://stackoverflow.com/a/68987830/11637379

also, the working code should look something like this:

const handleSubmit = async () => {
  /* processing code */
  const res = await axios.post(api, body); // now it acts as if it's a synchronous call
  fetchQuizzes();
  /* additional clean-up / refreshing data *./
}

CodePudding user response：

  const handleSubmit = () => {
    setLoading(true);

    const body = {
      name: newQuizName,
      collectionId: newQuizCollection,
      length: newQuizLength,
      estimator: newQuizEstimator,
      survey: newQuizSurvey
    }

    axios.post(quizzes_api, body).then(res => console.log(res));
    fetchQuizzes();
    resetDialog();

    setLoading(false);
   }

here you're fetching before the post request is completed hence you're not getting an updated results. use async await and run fetchQuizzes only after the post is completed.

Also, useEffect runs whenever anything changes in the dependency array...so if you change some dependency from inside the useEffect, it'll cause an infinite loop