React functional stateless component, PureComponent, Component; what are the differences and when should we use what?

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:

  1. Functional stateless component which doesn’t extend any class
  2. A component that extends PureComponent class
  3. 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 use PureComponent for better performance?

3 Answers
3

Leave a Comment