React.js shouldComponentUpdate () and reaction-router Link

Question

Currently, I doubt the correct combined implementation of the response of the Link router and shouldComponentUpdate () at the root application level.

That is, I have a root component App.jsx , which contains a global component with a header, footer, sidebar, etc., and the same component has a long ajax poll that receives new registrations to the system and updates the state when it registers new users.

Since I don’t want to click re-render on the component (and therefore all its children) on ajax answers that have no updates, I decided to use the wonderful mustComponentUpdate () .

So, I came up with something like this - noting that I am using lo-dash:

shouldComponentUpdate (/*prevProps*/, prevState) {
  return !_.isEqual(this.state,prevState);
}

In this case, the component correctly ignores irrelevant answers about the latest registrations.

Now the problem arises when I have to perform routing. To clarify this earlier, this is the render () structure type :

Note: _routerTransitionKey is just an assistant, I don’t have to make transitions when I view the internal view state and it works correctly.

<Grid key='app' id="wrapper" className="no-padding">
  <Header user={this.state.user} allRegistrations={this.state.allRegistrations}/>
  <section id="page-wrapper">
    <NotificationArea key='internalNotification' />
    <RouteHandler key={_routerTransitionKey} user={this.state.user} allRegistrations={this.state.allRegistrations}/>
  </section>
</Grid>

RouteHandler , , , , . render() RouteHandler.

- :

 shouldComponentUpdate (/*prevProps*/, prevState) {
   return !_.isEqual(this.state,prevState) || ROUTE_CHANGED ;
 }

: - ? - , , ...

Answer 1

, @WayneC, , , .

, , , this.props, this.context.router.getCurrentPath()

, :

shouldComponentUpdate (/*nextProps*/, nextState) {
  return !_.isEqual(this.state,nextState) || this.context.router.getCurrentPath() !== _routerTransitionKey;
}

, _routerTransitionKey Util, :

var Utils = {
  Router: {
    TransitionKey: {
      get: function(){
        return Router.HistoryLocation.getCurrentPath();
      }
    }
  }
}

_routerTransitionKey = Utils.Router.TransitionKey.get();

_routerTransitionKey , render(), .

... .