React shouldComponentUpdate() is called even when props or state for that component did not change

20
votes

I added lifecycle method to my React component

  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps, nextState);
    console.log(this.props, this.state);

    return false;  
  },

My issue is that this method is called on the component even when nextProps, and nextState, is exactly the same as the current props and state. When I compare the console.log statements for nextProps and this.props the are exactly the same. Same with the state.

So why is shouldComponentUpdate called?

It is called whenever I change the state of the parent component. But none of the props or state are changing on the actual component. So why is it called?

fyi, I am using React with Meteor

Further Clarification:

I am wondering why the function shouldComponentUpdate is being called in the first place. None of the state or props of that component are changing. But the state of the parent component is changing.

5
reactjs
its called because your'e returning true, if you return false, it wont – omarjmh
Well my question was, why is the function called in the first place. The props or state did not change. But I figured out it was being called because the parent component was re-rendering, thus called shouldComponentUpdate. I think... – Nearpoint
That was just a quick comment, please see my full answer below... – omarjmh

5 Answers

23
votes

React automatically calls shouldComponentUpdate, it is triggered before the re-rendering process starts (in this case of your parent component.) So naturally it is called frequently.

The default implementation of this function returns true so to stop the re-render you need to return false here:

  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps, nextState);
    console.log(this.props, this.state);

    return false;  
  }

Advanced Concerns, React page

So, in summary, React avoids carrying out expensive DOM operations required to reconcile subtrees of the DOM by allowing the user to short circuit the process using shouldComponentUpdate,

26
votes

The purpose of shouldComponentUpdate is to indicate if render should be called. In your case some parent component has rendered and indicated it wanted to also render an instance of your child component.

shouldComponentUpdate is your opportunity to short-circuit that render and say 'don't bother, nothing changed down here'.

Now, to your question, "why was it even called since nothing changed"? React does not compare the old and new props itself. You can get a mixin to do it for you, (ie. PureRenderMixin), but by default React just lets the render run.

The reason React doesn't do the comparison itself is for a couple reasons. Firstly, the performance savings of skipping render may be negligible compared to analyzing props and state. Since React's render mechanism is already optimized to avoid unnecessary DOM manipulation it can just assume the component needs to update and expect reasonable performance. Secondly, doing the comparison is not exactly straight-forward. Is your prop a primitive?, an Immutable?, an array?, a complex object?, will a deep compare be necessary?

React's model is "We will render everything asked by default. If you want something to opt-out for performance, then go ahead and tell us by implementing shouldComponentUpdate".

6
votes

shouldComponentUpdate() is called everytime:

  • the props are updated by every re-render of the parent component. This includes all scenario's where re-render takes place with exactly the same prop values.
  • the state is updated by a call to setState() (the only way allowed by react). This includes all scenario's where the value of state is exactly the same.

Sometimes it can be useful to let the re-render cycle go through, even though the new value is exactly the same as the old value. E.g. when your component receives a user ID (could be unchanged) through props, and fetches new messages from somewhere and puts them in state.

Also, 'shouldComponentUpdate()`, as a separate method to check for changes and only update if something changed, makes for nice maintainable code:

  • make a first version without shouldComponentUpdate(), and ensure that the same set of props and state lead to the same outcome being rendered.
  • add and debug shouldComponentUpdate()

It is relatively easy to debug a 'state machine' that takes input (state and props) and renders output. It is much harder to debug a machine that manages state changes.

0
votes
shouldComponentUpdate() – Returns true or false value based on certain conditions. 
If you want your component to update, return true else return false. 
By default, it returns

true.

if(shouldComponentUpdate) {
     // then render() is called and update UI/view 
}else{
   // then render() is not called ....[Don't update UI]
}
0
votes

shouldComponentUpdate method return Boolean value that specifies whether React should continue with the rendering or not.

By default value is true.

when to use shouldComponentUpdate: when you want that your components do not render when your previous state value is equal to next state value