PureComponent

React.PureComponent is exactly like React.Component but implements shouldComponentUpdate() with a shallow prop and state comparison.

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.

When to use PureComponent vs Stateless (functional) components One question that often comes up is whether to use Stateless (functional) components or PureComponent.

For simple, presentational-only components that need to be easily reused and don’t require state, prefer stateless functional components. The ESLint rule [react/prefer-stateless-function](https://github.com/Shopify/eslint-plugin-shopify/blob/master/lib/config/rules/react.js#L63) currently enforces this pattern when using the eslint-preset-shopify preset.

This way you're sure they are decoupled from the actual app logic, that they are dead-easy to test and that they don't have unexpected side effects. The exception is if for some reason you have a lot of them or if you really need to optimise their render method (as you can't define shouldComponentUpdate for a stateless functional component).

One might be tempted to think that functional components would be more performant and have less overhead than class-based components, but this is currently not the case. Internally, stateless component are wrapped in a class and follow the same code path as classed-based components. However, the React team has mentioned that they intend to work on improving the performance of stateless functional components in the future. The original React 0.14 release notes confirms this:

In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.