title: React one time API call for multiple routes design
body: <ul>
  <li>I am new to React and trying to implement an application. Basically
  my application have several routes. Each
  route is backed by the same set of back end data +some api calls
  specific to route taking back end data attributes as api params. </li>
  <li><p>So I wrote a Higher order component to call the
  API to retrieve the back end data,store the state in redux store and
  pass it as props to the wrapped component which works fine.</p>
  
  <pre><code>const withData = (WrappedComponent) =&gt; {
      class DataWrapper extends Component {
          constructor() {
              this.state = {
                  c: {},
                  d: []
              };
          }
  
      componentDidMount(){
          this.props.fetchData();
      }
  
      componentWillReceiveProps(nextProps){
          this.setState({
              c: nextProps.data.CSubset,
              d: nextProps.data.DSubset
          });
      }
  
      render() {
          return &lt;WrappedComponent {...this.props} {...this.state}/&gt;;
      }
      const mapStateToProps=(state)=&gt;({
          data:state.appData
      });
  
      return connect(mapStateToProps,{fetchData})(DataWrapper);
  }
  
  export default withData;
  
  
  class AppComponent extends Component{
      componentDidMount(){
          this.props.fetchComponentSpecificData(c.dataAttribute);
      }
      render(){
          return &lt;div /&gt;;
      }
  }
  
  export default connect(null,{fetchComponentSpecificData}(withData(AppComponent);
  </code></pre></li>
  <li><p>But the issue is API gets called for all routes.It should be one
  time per full application flow.</p></li>
  <li>The component specific data fetch happens before the common back end data is available causing the component specific API call to fail.</li>
  <li>User can type in the URL and launch
  into any route within application and the API has to be called only
  once and the HOC has to systematically route to the correct route
  based on data.
  Please advise on the design approach</li>
  </ul>