Came to know that from React v15.3.0, we have a new base class called PureComponent to extend with PureRenderMixin built-in. What I understand is that, under the hood this employs a shallow comparison of props inside shouldComponentUpdate
.
Now we have 3 ways to define a React component:
- Functional stateless component which doesn’t extend any class
- A component that extends
PureComponent
class - A normal component that extends
Component
class
Some time back we used to call stateless components as Pure Components, or even Dumb Components. Seems like the whole definition of the word “pure” has now changed in React.
Although I understand basic differences between these three, I am still not sure when to choose what. Also what are the performance impacts and trade-offs of each?
Update:
These are the question I expect to get clarified:
- Should I choose to define my simple components as functional (for the sake of simplicity) or extend
PureComponent
class (for performance sake)? - Is the performance boost that I get a real trade-off for the
simplicity I lost? - Would I ever need to extend the normal
Component
class when I can always usePureComponent
for better performance?