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.