React.Component vs React.PureComponent

reactjs state
semuzaboi picture semuzaboi · Dec 27, 2016 · Viewed 84.5k times · Source

The official React docs state that "React.PureComponent's shouldComponentUpdate() only shallowly compares the objects", and advises against this if state is "deep".

Given this, is there any reason why one should prefer React.PureComponent when creating React components?

Questions:

  • is there any performance impact in using React.Component that we may consider going for React.PureComponent?
  • I am guessing shouldComponentUpdate() of PureComponent performs only shallow comparisons. If this is the case, can't said method be used for deeper comparisons?
  • "Furthermore, React.PureComponent's shouldComponentUpdate() skips prop updates for the whole component subtree" - Does this mean that prop changes are ignored?

Question arose from reading into this medium blog, if it helps.

Answer

vimal1083 picture vimal1083 · May 12, 2017

The major difference between React.PureComponent and React.Component is PureComponent does a shallow comparison on state change. It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.

You should go for React.PureComponent when you can satisfy any of the below conditions.

  • State/Props should be an immutable object
  • State/Props should not have a hierarchy
  • You should call forceUpdate when data changes

If you are using React.PureComponent you should make sure all child components are also pure.

is there any performance impact in using React.component that we may consider going for React.PureComponent?

Yes, it will increase your app performance (because of shallow comparison)

I am guessing shouldComponentUpdate() of Purecomponent performs only shallow comparisons . If this is the case can' t the said method used for deeper comparisons?

You guessed it correctly. You could use it if you satisfy any of the conditions I mentioned above.

"Furthermore, React.PureComponent's shouldComponentUpdate() skips prop updates for the whole component subtree" - Does this mean that prop changes are ignored?

Yes, prop changes will be ignored If it couldn't find difference in shallow comparison.

Related questions

React: how to update state.item[1] in state using setState?

I'm creating an app where the user can design his own form. E.g. specify name of the field and details of which other columns that should be included. The component is available as a JSFiddle here. My initial state …

Read More
Updating an object with setState in React

Is it at all possible to update object's properties with setState? Something like: this.state = { jasper: { name: 'jasper', age: 28 }, } I have tried: this.setState({jasper.name: 'someOtherName'}); and this: this.setState({jasper: {name: 'someothername'}}) The first results in a syntax …

Read More
What is the best way to add a value to an array in state

I have an array in state, let's say this.state.arr. I want to add something to this state property, and then change some more properties. Option 1 onChange(event){ this.state.arr.push('newvalue'); ... this.setState({some:'val',arr:this.…

Read More