lundi 25 septembre 2017

Knowing when the UI is ready in React / Redux

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:

  1. DOM load.
  2. Initial React render.
  3. HTTP calls triggered from various componentDidMount()s
  4. HTTP calls return. Redux state is updated with HTTP responses.
  5. React renders with new values from HTTP responses.
  6. All initial loading is complete. User is ready to interact with the app.

At the end of this process, I'd like to fire a tracking event to record the value of window.performance.now().

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".

Things I've tried or considered:

  1. Look for a React lifecycle hook that tells me if any child is updating. Something like componentOrAnyChildDidUpdate(). I don't think this exists, and it may be counter to the React philosophy.
  2. Hack together a anyChildDidUpdate() lifecycle hook via context 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 context is an experimental API.
  3. Subscribe to the Redux state via store.subscribe(). 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 store.subscribe() callback were guaranteed to be executed synchronously after react-redux's callback. But that is not the case.

Is there a good way to do this in React?




Aucun commentaire:

Enregistrer un commentaire