title: Fetch data only once per React component
body: <p>I have a simple component that fetches data and only then displays it:</p>
  
  <pre><code>class MyComponent extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              loaded: false
              stuff: null
          };
      }
  
      componentDidMount() {
          // load stuff
          fetch( { path: '/load/stuff' } ).then( stuff =&gt; {
              this.setState({
                  loaded: true,
                  stuff: stuff
              });
          } );
      }
  
      render() {
          if ( !this.state.loaded ) {
              // not loaded yet
              return false;
          }
  
          // display component based on loaded stuff
          return (
              &lt;SomeControl&gt;
                  { this.state.stuff.map( ( item, index ) =&gt;
                      &lt;h1&gt;items with stuff&lt;/h1&gt;
                  ) }
              &lt;/SomeControl&gt;
          );
      }
  }
  </code></pre>
  
  <p>Each instance of <code>MyComponent</code> loads the same data from the same URL and I need to somehow store it to avoid duplicate requests to the server. </p>
  
  <p>For example, if I have 10 <code>MyComponent</code> on page - there should be just one request (1 fetch).</p>
  
  <p>My question is what's the correct way to store such data? Should I use static variable? Or I need to use two different components?</p>
  
  <p>Thanks for advice!</p>