title: Best practice to handle data from API call and render React components
body: <p>I am somewhat new to React and looking for best practices for a particular situation within my React/Redux/Firebase PWA. Right now, the part I am concerned with is essentially a wrapper for the Yelp API. </p>
  
  <p>I have a main component that queries the Yelp API when loaded (inside componentDidMount) based on user preferences received elsewhere in the app. This component also queries the API on a form submit with user inputs. It loops thru the data from both, and passes props to a child component. This view looks like a list of all the businesses received from the API. Here's what an example looks like:</p>
  
  <pre><code>"businesses": [
      {
        "rating": 4,
        "price": "$",
        "phone": "+14152520800",
        "id": "E8RJkjfdcwgtyoPMjQ_Olg",
        "alias": "four-barrel-coffee-san-francisco",
        "is_closed": false,
        "categories": [
          {
            "alias": "coffee",
            "title": "Coffee &amp; Tea"
          }
        ],
        "review_count": 1738,
        "name": "Four Barrel Coffee",
        "url": "https://www.yelp.com/biz/four-barrel-coffee-san-francisco",
        "coordinates": {
          "latitude": 37.7670169511878,
          "longitude": -122.42184275
        },
        "image_url": "http://s3-media2.fl.yelpcdn.com/bphoto/MmgtASP3l_t4tPCL1iAsCg/o.jpg",
        "location": {
          "city": "San Francisco",
          "country": "US",
          "address2": "",
          "address3": "",
          "state": "CA",
          "address1": "375 Valencia St",
          "zip_code": "94103"
        },
        "distance": 1604.23,
        "transactions": ["pickup", "delivery"]
      },
      // ...
    ],
  </code></pre>
  
  <p>As mentioned before, the main component passes down data to the child component, which renders each single object that list. This child component also creates a Link to another component based on the id of each business. This other component for now is simply the exact same look as one individual child component, just on a different URL. For example, the main component is "/venues" and the individual page for a business would be "/venue/E8RJkjfdcwgtyoPMjQ_Olg". The data is pulled from the Redux state (its a HOC), and filtered out to find that id.</p>
  
  <p>The problem I'm running in to is when I refresh the page while on a businesses's individual page, Redux state is cleared out and hence is unable to render properly with the data. To try and work around this I attempted to have a service worker cache everything it would need, but this does not work. Refreshing ends up just showing the loading page I created, because its not making the call (which is expected - don't want it doing this) and its also not pulling data from the caches.</p>
  
  <p>Is there a better way to accomplish getting data all the way to the individual business component after a refresh? Or a better way to cache the entire page/API response so it will render properly on a refresh?</p>
  
  <p>I suppose I could have it reach out to the API for that specific business but I was trying to avoid that.</p>