One fetch request creates many GET requests on server

Question

Here is my code:

import React from "react";
import { useState, useEffect } from "react";
import TutorialList from "./TutorialList";
import PropTypes from "prop-types";

const Home = () => {
  const [tutorials, setTutorials] = useState(null);

  useEffect(() => {
    console.log("Fetching data");
    fetch("http://192.168.212.52:8080/api/tutorials/all/")
      .then((res) => {
        return res.json();
        console.log("Getting json from response");
      })
      .then((data) => {
        console.log(data);
        setTutorials(data);
      });
  }, []);

  return (
    <div className="home">
      {console.log(tutorials)}
      {tutorials && (
        <TutorialList tutorials={tutorials} title={"All tutorials"} />
      )}
    </div>
  );
};
Home.propTypes = {
  title: PropTypes.string,
};
export default Home;

I expect this to make 1 get request to the server, which returns the data that is then rendered with react.

What it actually does is make more than 10 requests to the server, still rendering the data after all the requests finish. I can see the requests both from the server logs and from the browser networking dev tools.

However, the Fetching data and Getting json from response logs only execute once, as expected.

Answer 1

Since fetch requests a resource from the network, it runs asynchronously. This said, if you want to get to run it inside a useEffect it might be that if you wrap it in an async function it should work. However, keep in mind that it's not the argument of this hook itself async but another function that you define inside. For instance,

useEffect(() => {
    console.log("Fetching data");
    async function retrieveData() {
      const json = await fetch("http://192.168.212.52:8080/api/tutorials/all/")
      const data = await response.json()
      setTutorials(data)
      console.log("Got json from response");
    }
    retrieveData()
  }, []);