What's the difference between `{ Component }` and `{ PureComponent }`?

react-native
react
#1

What’s the difference in syntax and meaning

#2

There are (at least) three ways to write components in React:

import React, { Component } from 'react';
export default class MyComponent extends Component {
  state = {
    key: 'value'
  };

  render = () => <div>{this.state.value}</div>
}

This way provides all the bells and whistles like State and Lifecycle and can be used if performance isn’t your main concern at the time

import React from 'react';
export default MyComponent = props => <div>{this.props.value}</div>;

A “stateless component” is a little more succinct, but doesn’t provide any performance gain over the previous method. You can use it when you don’t need a state, don’t need to tap into the lifecycle methods, and to save space. React basically reads it like a normal Component.

import React, { PureComponent } from 'react';
export default class MyComponent extends PureComponent {
  state = {
    key: 'value'
  };

  render = () => <div>{this.state.value}</div>
}

The main difference with PureComponent is that it only does a shallow comparison of your state to determine when to re-render, so while it still compares simple values on the state like numbers and strings, for objects, it’ll only check to see if the entire object was re-assigned, not if you changed something within it. This can add up to a pretty sizable performance gain, but can have unintended effects on child components and lifecycle methods.