I'm writing a react app that fetches data from two different APIs. In the code below, I call the two APIs then console.log the response. After npm start, in the console, I see that the response has been console.logged a few times. I don't know why it's doing this and it's causing issue with the app's behavior. It's receiving the data from AWS dynamoDB tables.

function App() {
  const [ response , setResponse ] = useState();
  const [ btnText , setbtnText ] = useState('Get Data');
  const [ details , setDetails ] = useState();
  
async function fetchData() {
  try {
    await fetch('url hidden' , {
      method: 'POST',
      header: {'Content-Type': 'application/json'},
    }).then(res => res.json())
      .then(res => setResponse(res))

    await fetch('url hidden' , {
      method: 'POST',
      header: {'Content-Type': 'application/json'},
    }).then(res => res.json())
      .then(res => setDetails(res))

  } catch (error) {
    console.log(error);
  };
}
  console.log(response)

  return (
    <div className="container">
      <header className='header'>
        <button onClick={fetchData}>{btnText}</button>
      </header>
      <Summary response={response} details={details} />
    </div>
  );
}

I'm writing a react app that fetches data from two different APIs. In the code below, I call the two APIs then console.log the response. After npm start, in the console, I see that the response has been console.logged a few times. I don't know why it's doing this and it's causing issue with the app's behavior. It's receiving the data from AWS dynamoDB tables.

function App() {
  const [ response , setResponse ] = useState();
  const [ btnText , setbtnText ] = useState('Get Data');
  const [ details , setDetails ] = useState();
  
async function fetchData() {
  try {
    await fetch('url hidden' , {
      method: 'POST',
      header: {'Content-Type': 'application/json'},
    }).then(res => res.json())
      .then(res => setResponse(res))

    await fetch('url hidden' , {
      method: 'POST',
      header: {'Content-Type': 'application/json'},
    }).then(res => res.json())
      .then(res => setDetails(res))

  } catch (error) {
    console.log(error);
  };
}
  console.log(response)

  return (
    <div className="container">
      <header className='header'>
        <button onClick={fetchData}>{btnText}</button>
      </header>
      <Summary response={response} details={details} />
    </div>
  );
}

I also tried useEffect to fetch data as soon as app loads, but it's doing the same thing.

  useEffect(() => {
    try {
      Promise.all([
        fetch('url hidden' , {
          method: 'POST',
          header: {'Content-Type': 'application/json'},
        }).then(res => res.json()).then(res => setResponse(res)),
        
        fetch('url hidden' , {
          method: 'POST',
          header: {'Content-Type': 'application/json'},
        }).then(res => res.json()).then(res => setDetails(res)),
      ]);    
    }
    catch(err) {
      console.log(err);
    }
  } , [])

This image shows the response after clicking the button only once:

• javascript
• reactjs
• response
• fetch-api

• May be that is printing because of your console.log inside the App ponent ? I would suggest to check your network activity to confirm that the api calls are happening multiple times. – Thakur Karthik Commented Jul 7, 2022 at 6:53

2 Answers 2

When you use console.log in the the functional ponent you will get that console.log each time the ponent rerenders. And that happens for example each time you set a new state. You could just move the console.log inside the fetch function.

Or you just console.log the values in useEffect if they change. Like in the example below.

I also refactored the fetchData function to use async await and Promise.all more efficient.

Also you were missing an "s" for "headers" for the fetch method.

 async function fetchData() {
   try {
    const [response, details] = await Promise.all([
      (
        await fetch("url hidden", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
        })
      ).json(),
      (
        await fetch("url hidden", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
        })
      ).json(),
    ]);

    setResponse(response);
    setDetails(details);
  } catch (error) {
    console.log(error);
  }
}

useEffect(() => {
  fetchData();
}, []);

useEffect(() => {
  console.log(response, details);
}, [response, details]);

If you move console.log(response) inside fetchData then you will get exact information about how many times handler executes, and it really should be only once, on click. With your approach you moved log in ponent body and this will cause log to execute each time element rerenders - probably 3 times: one log initially when element is loaded in DOM, and other 2 when you set states inside handler.