0

I am working on project with react Flux architecture. my controller view look like

var MyComponent = React.createClass({
    getInitialState: function() {
        return MyStore.getData();
    },
    render: function() {
        return <ul className="navigation">
                   <UserControl/>
                   <NavigationBar change={this._onChange} messageCounter={this.state.data.score}/>
               </ul>
    },
    _onChange: function() {
        this.setState(Store.getData());
    }
});

I have some nested views in the render function, and every change that made in some view will cause controller view render function to run. This cause render function of all nested components also to run, but the only change will be on the UserControl component. I don't need all the nested component's render function to run.

How can I fix it?
Is it behaviour of flux architecture?
How to decrease the times render function calls?

James Montagne
  • 77,516
  • 14
  • 110
  • 130
Gilad Tamam
  • 306
  • 2
  • 7

1 Answers1

1

The short answer is override the shouldComponentUpdate method: http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

That method receives the state and props updates, so you can determine if any of that component's data has changed. If not, return false, and that component won't render.

More importantly, do you really need to worry about those extra renders? If you aren't seeing a real performance problem, I'd leave it be. This is one of the main advantages of React's approach to DOM manipulation. If the component renders, and nothing has changed, the DOM will go untouched.

Shawn
  • 919
  • 6
  • 11
  • What if 'MyComponent' contains much more elements? Is there any way to tell React to render only 'UserControl' component for example and not MyComponent and it's other childs? – Naor Jan 27 '15 at 22:59
  • You might consider [PureRenderMixin](http://facebook.github.io/react/docs/pure-render-mixin.html) if your component render the same result given the same props and state. – eth3lbert Jan 28 '15 at 14:49