componentWillReceiveProps: how to know when dynamic segment changes?

[ruggeri]

tl;dr: what is the recommended way in componentWillReceiveProps to find the previous dynamic segment?

Longer:

I understand the note about dynamic segments: the lifecycle hook to fetch data when a dynamic segment changes is componentWillReceiveProps. Cool.

In React, componentWillReceiveProps receives as an argument the nextProps. These can be compared to this.props and used to determine whether a relevant property changed and data should be fetched.

What I want to do is only fetch new data in componentWillReceiveProps if the dynamic segment changes. Significantly, in the presence of other props, I cannot assume that componentWillReceiveProps is called only when the dynamic segment changes. However I haven't found a way to recover the previous routing params.

I can easily work around by setting an instance variable in componentWillReceiveProps to record the current routing params for comparison on the next invocation of componentWillReceiveProps. That seems sort of nasty and stateful.

I hope I haven't misunderstood. But if I have understood correctly, then the routing params context is mutable and the previous route is lost, and cannot be compared against. That seems contrary to the concept of componentWillRecieveProps.

[ruggeri]

To be clearer, right now I feel like I have to write something like this in my components:

var MyComponent({
  componentWillReceiveProps: function () {
    if (!_.isEqual(this._prevParams, this.getParams())) {
      this._prevParams = _.clone(this.getParams())
      this.fetchSomeData()
    }
  }

  // ...
});

[abergs]

I ran into this too when upgrading the router. We had to solve it in the same way. Perhaps a better way would be to introduce a this.getPrevParams()?

[gaearon]

I usually do this:

parseUserId(props) {
  return parseInt(props.params.userId, 10);
},

componentWillReceiveProps(nextProps) {
  var userId = this.parseUserId(this.props),
      nextUserId = this.parseUserId(nextProps);

  if (userId !== nextUserId) {
    this.userWillChange(nextUserId);
  }
},

userWillChange(userId) { ... }

Why do you need to save previous params?

[abergs]

@gaearon I don't thank that works with latest react-router? We mean comparing the last props.params.userId with nextProps.params.userId

[gaearon]

Why wouldn't it? But you're right, I meant props.params.

---

@abergs I fixed the example.

[abergs]

@gaearon https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md#thispropsparams-and-thispropsquery

[gaearon]

@abergs But you are still free to pass them to route handlers if you like. (I do.)

e.g.

  router.run((Handler, state) => {
    RouterActionCreators.changeRoute(state);
    React.render(<Handler {...state} />, document.body); // this will pass query, params, like before
  });

and later

return <RouteHandler {...this.props} />

in nested handlers.

This'll give you familiar params, query on each route handler as long as you don't forget to pass them.

[gaearon]

Another way do to the same is to follow last comment in example you linked to:

// Also, if you're using a flux-style app, you can trigger a "transition"
// action in the `run` callback with the params/query in the payload, then
// subscribe in your handlers to the store that grabs the data.

[ryanflorence]

see #579 (comment)