Is having more than one API fetch request in a React useEffect hook always very slow?

I am writing a simple application using React to fetch and display data from the Star Wars API. I first fetch information about a particular planet. The response JSON for a given planet contains a bunch of data, including an array of URLs pointing to further data about notable residents of said planet. I next call each of those URLs in order to display a list of the names of the residents of the current planet.

This code works, but is slow as heck:

const url = `https://swapi.dev/api/planets/`;

const [currentPlanetNumber, setCurrentPlanetNumber] = React.useState(1);
const [currentPlanet, setCurrentPlanet] = React.useState({});
const [currentPlanetResidentsDetails, setCurrentPlanetResidentsDetails] =
  React.useState([]);

React.useEffect(() => {
  (async () => {
    const planetData = await fetch(`${url}${currentPlanetNumber}/`).then(
      (response) => response.json()
    );
    setCurrentPlanet(planetData);

    if (planetData.residents.length === 0) {
      setCurrentPlanetResidentsDetails(["No notable residents"]);
    } else {
      const residentsURLs = planetData.residents;
      const residentsNames = await Promise.all(
        residentsURLs.map(async (item) => {
          const name = await fetch(item).then((response) => response.json());
          const newName = name.name;
          return newName;
        })
      );
      setCurrentPlanetResidentsDetails(residentsNames);
    }
  })();
}, [currentPlanetNumber]);

The following code works fairly fast for this:

const url = `https://swapi.dev/api/planets/`;

const [currentPlanetNumber, setCurrentPlanetNumber] = React.useState(1);
const [currentPlanet, setCurrentPlanet] = React.useState({});
const [currentPlanetResidentsDetails, setCurrentPlanetResidentsDetails] =
  React.useState([]);

React.useEffect(() => {
  (async () => {
    const planetData = await fetch(`${url}${currentPlanetNumber}/`).then(
      (response) => response.json()
    );
    setCurrentPlanet(planetData);
  })();
}, [currentPlanetNumber]);

React.useEffect(() => {
  (async () => {
    if (currentPlanet.residents.length === 0) {
      setCurrentPlanetResidentsDetails(["No notable residents"]);
    } else {
      const residentsURLs = currentPlanet.residents;
      const residentsNames = await Promise.all(
        residentsURLs.map(async (item) => {
          const name = await fetch(item).then((response) => response.json());
          const newName = name.name;
          return newName;
        })
      );
      setCurrentPlanetResidentsDetails(residentsNames);
    }
  })();
}, [currentPlanet]);

What makes the second one so much faster? I assumed that they would both take about the same length of time, because the same number of fetch requests get done either way.

Is it a good rule of thumb to not have more than one fetch request an any given useEffect hook?

No, there is no rule of thumb stating not to have more than one fetch request in a given useEffect.

In your first example, the fetch requests are fired consecutively, while in the second example they are fired concurrently.

Your first example seems to be more appropriate than the second. In the second example, it seems to you that the code is executing faster because both effects are firing concurrently when the component mounts. On subsequent changes to 'currentPlanetNumber', both examples should execute in the same amount of time.