Fetch data only once per React component

For people trying to figure it out using functional component.

If you only want to fetch the data on mount then you can add an empty array as attribute to useEffect

So it would be :

useEffect( () => { yourFetch and set }, []) //Empty array for deps.

You should rather consider using state management library like redux, where you can store all the application state and the components who need data can subscribe to. You can call fetch just one time maybe in the root component of the app and all 10 instances of your component can subscribe to state.

If you want to avoid using redux or some kind of state management library, you can import a file which does the fetching for you. Something along these lines. Essentially the cache is stored within the fetcher.js file. When you import the file, it's not actually imported as separate code every time, so the cache variable is consistent between imports. On the first request, the cache is set to the Promise; on followup requests the Promise is just returned.

// fetcher.js
let cache = null;

export default function makeRequest() {
  if (!cache) {
    cache = fetch({
      path: '/load/stuff'
    });
  } 
  
  return cache;
}

// index.js
import fetcher from './fetcher.js';

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            loaded: false
            stuff: null
        };
    }

    componentDidMount() {
        // load stuff
        fetcher().then( stuff => {
            this.setState({
                loaded: true,
                stuff: stuff
            });
        } );
    }

    render() {
        if ( !this.state.loaded ) {
            // not loaded yet
            return false;
        }

        // display component based on loaded stuff
        return (
            <SomeControl>
                { this.state.stuff.map( ( item, index ) =>
                    <h1>items with stuff</h1>
                ) }
            </SomeControl>
        );
    }
}

You can use something like the following code to join active requests into one promise:

const f = (cache) => (o) => {
    const cached = cache.get(o.path);
    if (cached) {
        return cached;
    }
    const p = fetch(o.path).then((result) => {
        cache.delete(o.path);
        return result;
    });
    cache.set(o.path, p);
    return p;
};
export default f(new Map());//use Map as caching

If you want to simulate the single fetch call with using react only. Then You can use Provider Consumer API from react context API. There you can make only one api call in provider and can use the data in your components.

const YourContext = React.createContext({});//instead of blacnk object you can have array also depending on your data type of response
const { Provider, Consumer } = YourContext
class ProviderComponent extends React.Component {
   componentDidMount() {
     //make your api call here and and set the value in state
      fetch("your/url").then((res) => {
         this.setState({
           value: res,
         })
       })

   }
   render()  {
     <Provider value={this.state.value}>
       {this.props.children}
     </Provider>
   }
}

export {
 Provider,
 Consumer,
}

At some top level you can wrap your Page component inside Provider. Like this
<Provider>
   <YourParentComponent /> 
</Provider>

In your components where you want to use your data. You can something like this kind of setup

import { Consumer } from "path to the file having definition of provider and consumer"

<Consumer>
{stuff => <SomeControl>
                { stuff.map( ( item, index ) =>
                    <h1>items with stuff</h1>
                ) }
            </SomeControl>
}
</Consumer>

The more convenient way is to use some kind of state manager like redux or mobx. You can explore those options also. You can read about Contexts here link to context react website

Note: This is psuedo code. for exact implementation , refer the link mentioned above

If your use case suggests that you may have 10 of these components on the page, then I think your second option is the answer - two components. One component for fetching data and rendering children based on the data, and the second component to receive data and render it.

This is the basis for “smart” and “dumb” components. Smart components know how to fetch data and perform operations with those data, while dumb components simply render data given to them. It seems to me that the component you’ve specified above is too smart for its own good.