How to stop child component from making api call twice for the very first time when someone visit the page

So let say I have one home page with 3 tabs, "All", 'Sci-fi',"Comedy".I am calling the child component in the home page and rendering the respected data. What is happening is that when user visit for the first time tab is selected as "All". My child component is making same api call twice.How to prevent it.

import React from 'react';
import ChildComponent from './ChildComponent';

function Home() {
  return (
    <div>
      <h1>Home Component</h1>
      <ChildComponent />
    </div>
  );
}

export default Home;

import React, { useState, useEffect } from 'react';

function ChildComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h2>Child Component</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default ChildComponent;

React Strict Mode renders the component twice to check if the function logic is implemented correctly.

In this scenario, Every time you render, the API calls keeps on increasing.

You need to implement a logic to cleanup/ destroy the API call during the component getting destroyed and rendering for second time.

Refer to the docs Fixing bugs found by double rendering in development for more information.

I see your issue, I have a few solutions here, let's see if any of them can be applied to your project:

• Firstly, please make sure you have turned off ReactJS's StrictMode.
• Secondly, if each tab of yours calls a different API, create a useState on the Home page.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

function Home() {
  const [tabs, setTabs] = useState('TOP_PAGE')
  return (
    <div>
      <h1>Home Component</h1>
      {tabs === 'TOP_PAGE' && <ChildComponentTopPage /> }
      {tabs === 'SECOND_PAGE' && <ChildComponentSecondPage /> }
    </div>
  );
}

<!-- end snippet -->

• Lastly, if the API for each child component is the same, I recommend placing the API in the parent component, and then passing props to each child component.

Try removing React.Strictmode in your main.jsx.
you would go from:

<React.StrictMode>
<App/>
</React.StrictMode>


to:
<App/>

, because React.Strictmode executes twice for some reason