weird question about shouldComponentUpdate()

Question

I don't understand how shouldComponentUpdate() method has access to old state, As i know, shouldComponentUpdate() is fired after props or state changes.

Suppose you call setState() , After that the current state will be changed and will be update with new state. But shouldComponentUpdate() is fired even after updating the state to the latest version. Therefore how can 'this.state' inside shouldComponentUpdate() return the old state?

shouldComponentUpdate(nextProps, nextState) {
   console.log(this.state); // how can this be old state?
}

Did anyone get an idea? Thanks a lot.

Nazim · Answer 1 · 2019-04-06T16:47:16.063

3

This lifecycle function is called before anything on the component gets updated including state like the react docs emphasizes.

shouldComponentUpdate() is invoked before rendering when new props or state are being received.

So at the moment in time where shouldComponentUpdateis called, the new state has not been applied yet and this.state still points to the old state.

edited Apr 06 '19 at 16:47

answered Apr 06 '19 at 16:12

Nazim

367
2
11

Thanks. Okay, Final question. So the nextState will overwrite the oldState if "true" is returned from shouldComponentUpdate() method? – dmcshehan Apr 06 '19 at 16:20
1

yes, and if you return false React won't update that component. here's a link to that function's doc it' short and well explained https://reactjs.org/docs/react-component.html#shouldcomponentupdate – Nazim Apr 06 '19 at 16:28

score 2 · Answer 2 · answered Apr 06 '19 at 16:14

The simplest way to put this would be - a render is triggered while something has changed above an element, in hierarchy. If the component itself will render during this render cycle initiated from above, is dependent on the return value of shouldComponentUpdate.

If this method returns true, the render will happen changing the component's current state, which was not changed until the shouldComponentUpdate returned true.

Hence this.state inside shouldComponentUpdate method has older state and nextState in the arguments has latest state.

weird question about shouldComponentUpdate()

2 Answers2