React Component OR React PureComponent

Question

I am new to React and I want to know when should I be using a React Component and when should I be using React PureComponent?

Component:

import React, { Component } from 'react'

PureComponent:

import React, { PureComponent } from 'react'

Can I use React PureComponent everywhere?

OR

is it safe to use shouldComponentUpdate and check and return false of not required

I just read an article stating that using pure components actually cause more harm than good. they recommend using "react-update-if-changed". How much true is this?

Article: https://hackernoon.com/react-purecomponent-considered-harmful-8155b5c1d4bc

React.PureComponent implements shouldComponentUpdate with a shallow prop and state comparison. It is an optimization tool that you can use if you really need it. If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases. — Tholle
– Tholle, Commented Jul 12, 2018 at 14:23
Not nessecarily harmful, but it can introduce subtle bugs, as explained here. I would personally just use PureComponent when there is a specific case in my app that could need it, not use it by default. — Tholle
– Tholle, Commented Jul 12, 2018 at 14:27
@tholle I think it's better to make container components has a PureComponents rather than lower level components because if props and states have not changed then the lower level components are anyway not gonna be reached. — Praveen Rao Chavan.G
– Praveen Rao Chavan.G, Commented Jul 12, 2018 at 14:37
If you haven't yet, read up on React performance. If you're careful with your data, React is already fast in just about every case and you will almost never need React.PureComponent. — mccambridge
– mccambridge, Commented Jul 12, 2018 at 14:38

Anush Shukla · Accepted Answer · 2018-07-21 14:06:38Z

Can I use React PureComponent everywhere?

Yes, you can but trying using Functional component more and more. In case of Class component, keep it small and extend it to PureComponent or Component if you want to implement your own shouldComponentUpdate, would advise to do it when, on minimal non complex (nested deep array or/and object) props change your component needs to update.

Is it safe to use shouldComponentUpdate?

Yes, it is, if you know what you are doing, meaning that any flaw in your implementation, could lead to performance issues like unnecessary component re rendering just because your implementation of shouldComponentUpdate returned true or worse, that your component doesn't rerender on certain props change as your shouldComponentUpdate returns false due to some glitch.

The referenced medium post is trying to sell out react-update-if-changed package which seems like a good deal to go for at start but when you realize that

the real problem statement is all about performance optimization (refer https://reactjs.org/docs/optimizing-performance.html)

How to avoid unnecessary checks to determine component can update and avoid unwanted rerender ?

Pass props to component which you know is needed by the component and is going to change
In case, if there are many props being send to a component and on very few limited props change, the component needs to update and re render then you could very well implement your own shouldComponentUpdate (refer the example in the above shared link of react optimization). But be wary of props which are arrays and object, as differentiating them is a pain, especially the deep bulky nested ones.
Use a Functional (pure & stateless) component for your UI while for it's presentation logic (show-hide, sort, etc) would be present in a components which would be a Class (stateful and pure by extending it to React.PureComponent) having children prop as a function; with the help of HOC linking the logical and UI component
Do use the React Context API while trying to pass props between ancestor and descendant, especially if they are a level beyond like grand parent component to child component.

Using the last method which is all about Advanced React Patterns is the best way to have optimized performance and codebase. To understand it better, please refer Dumb and Smart Components and Presentational and Container Components.

yeah sure, why not when it is indeed a very question, after all.

Keshav Gera · Accepted Answer · 2020-08-09 06:55:10Z

1

import React, { PureComponent } from 'react'
export default Class PureComponent  extends React.PureComponent{
}

import React, { Component } from 'react'
export default Class NormalComponent  extends React.Component{
}

PureComponent Don’t have any Lifecycle Methods

PureComponent check shallow comparison and re-render when Needed
Use Pure Component when used when primitive data types int string boolean etc,

Note:-

PureComponent Don’t have any Lifecycle Methods
React PureComponent's shouldcomponentupdate() only shallowly compares the objects.

answered Aug 9, 2020 at 6:55

Keshav Gera

11.3k1 gold badge78 silver badges56 bronze badges

Collectives™ on Stack Overflow

React Component OR React PureComponent

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related