title: Knowing when the UI is ready in React / Redux
body: <p>I would like to know how long it takes my app to become "ready" for the user to interact with it. The timeline of the app loading includes the following:</p>
  
  <ol>
  <li>DOM load.</li>
  <li>Initial React render.</li>
  <li>HTTP calls triggered from various <code>componentDidMount()</code>s</li>
  <li>HTTP calls return. Redux state is updated with HTTP responses.</li>
  <li>React renders with new values from HTTP responses.</li>
  <li>All initial loading is complete. The user is ready to interact with the app.</li>
  </ol>
  
  <p>At the end of this process, I'd like to fire a tracking event to record the value of <code>window.performance.now()</code>.</p>
  
  <p>I'm not sure what the best way to do this is. React's component system does a good job of decoupling various parts of the UI. In this case, it, unfortunately, means that I'm not going to have one easy place to check to know "has everything been rendered with the new data". </p>
  
  <p>Things I've tried or considered:</p>
  
  <ol>
  <li>Look for a React lifecycle hook that tells me if any child is updating. Something like <code>componentOrAnyChildDidUpdate()</code>. I don't think this exists, and it may be counter to the React philosophy.</li>
  <li>Hack together an <code>anyChildDidUpdate()</code> lifecycle hook via <code>context</code> and making every component in my app either subclass a helper abstract base class or be wrapped in a higher-order component. This seems bad because <code>context</code> is an <a href="https://facebook.github.io/react/docs/context.html" rel="noreferrer">experimental API</a>.</li>
  <li>Subscribe to the Redux state via <code>store.subscribe()</code>. Update the Redux state to have an explicit record of whether all the HTTP calls have returned. Once all the HTTP calls have returned, and React is finished re-rendering, then I know to fire the tracking callback. The problem is knowing when React is finished re-rendering. It would work if my <code>store.subscribe()</code> the callback was guaranteed to be executed synchronously after <code>react-redux</code>'s callback. But that is not the case.</li>
  </ol>
  
  <p>Is there a good way to do this in React? </p>