Checking if state is still active

[agundermann]

The async-data example suggests the following approach for fetching data async before render:

Router.run(routes, function (Handler, state) {
  fetchData(state.routes, state.params).then((data) => {
    React.render(<Handler data={data}/>, document.getElementById('example'));
  });
});

The problem I see with this is that (unless the promise rejects) React.render will always be called, even if a new state came in the meantime. And if that newer state was already rendered, the UI will end up in an inconsistent state (browser URL and internal router state will differ from the manually set props). If you click fast enough in the example, you may end up seeing a different profile than the one you clicked last which is also reflected in the current URL.

This doesn't only affect async rendering, but can also happen when transitioning before a render:

Router.run(routes, function (Handler, state) {
  this.transitionTo(..); 
  // state is now stale and not consistent with the router state / URL
  React.render(<Handler data={getDataFromState(state)}/>, document.getElementById('example'));
});

A solution to this would be to keep track of the active state yourself:

var activeState = null;
Router.run(routes, function (Handler, state) {
  activeState = state;
  fetchData(state.routes, state.params).then((data) => {
    if(activeState === state){
      React.render(<Handler data={data}/>, document.getElementById('example'));
    }
  });
});

So I think that either this approach should be promoted, or the router should provide a way to check if state is still active.

[ryanflorence]

Yeah, should probably call that out. If you could send a PR with that change I'd merge it immediately, otherwise I'll do it next time I'm in the docs.