El elemento principal del desarrollo con react son los componentes, ya sean componentes funcionales o sean basados en clases, todas las aplicación en React hacen uso de estos y conocer las diferencia de uno y del otro nos hara sentir bastante seguridad y confianza a la hora de programar nuestras aplicaciones web y/o mobiles.

Componentes

En React podemos manejar 2 tipos de componentes, estos pueden ser los carentes de estado (stateless) y los que manejan un estado (stateful), ahora bien entre los que manejan un estado tambien están los que extienden de PureComponent que son basados en clases y son usados mayor mente para presentación y no manejan ningun la logica muy pesada, aunque pueden manejar estados normalmente no son usados para esto.

¿Que Diferencia hay entre un PureComponent y un Component?

La respuesta es corta: La diferencia esta en como los componente son actualizados una vez reciben nueva información.

Los PureComponent hará un render del componente si este encuentra diferencias entre las nuevos y viejos valores del State y las Props, pero a diferencia del Component estos solo se evaluaran de forma superficial estos valores, con esto quiero decir que si un objeto la comparación que hará sera en base a la referencia de este, así que siempre que dirá que tiene que hacer render nuevamente aunque los valores de este objeto sean los mismo, por eso es recomendable utilizar los PureComponent con valores inmutables y primitivos, así estara comparando por valor y no por referencias.

Ejemplo

En este código se muestran 2 componentes, Uno que extiende de Component que tiene un estado bien básico para forzar el render de este componente y un PureComponent.

Cada vez que el estado del Component padre sea actualizado, este llamara el método render y este creara un nuevo objeto y se lo enviara al PureComponent y este aunque el objeto tenga los mismos valores, actualizara el PureComponent por que serán 2 instancias diferentes.

class Pure extends React.PureComponent {
  render() {
    const niceValueInstance = this.props.nice;

    return <p>{niceValueInstance.value || 4}</p>;
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      niceValue: 0
    };
  }

  clickHandler = () => {
    this.setState({ niceValue: this.state.niceValue + 1 });
  };

  render() {
    const param = {
      value: 4
    };

    return (
      <Grid>
        <Row>
          <Pure nice={param} />
          <br />
          <button onClick={this.clickHandler}>Click</button>
        </Row>
      </Grid>
    );
  }
}

La forma correcta de utilizar nuestro PureComponent es pasar solo valores como Props para hacerle la vida mas y este pueda identificar fácilmente si tiene que actualizar o no y ahorrarnos una llamada al método render de este.

class Pure extends React.PureComponent {
  render() {
    console.log('render PureComponent');
    return <p>{this.props.nice}</p>;
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      niceValue: 0
    };
  }

  clickHandler = () => {
    this.setState({ niceValue: this.state.niceValue + 1 });
  };

  render() {
    const param = {
      value: 4
    };

    console.log('render Component');

    return (
      <Grid>
        <Row>
          <Col>Hello</Col>
          <Pure nice={4} />
          <br />
          <button onClick={this.clickHandler}>Click</button>
        </Row>
      </Grid>
    );
  }
}

Una regla para utilizar estos PureComponents que en ocasiones se olvida, es que si decidimos agregarles componentes hijos a nuestro PureComponent estos hijos deben ser PureComponent por igual, si no mantenemos esta regla es muy probable que nuestros códigos tengas hermosos bugs a la hora de actualizar el contenido de nuestras vistas.

Los PureComponents en ocasiones son utilizados para ganar rendimientos en nuestras aplicaciones para evitar hacer render de mas, pero el abuso de estos puede llevarnos a introducir bugs en nuestro código que serán difíciles de encontrar, por lo que como todo en la vida hay que controlar su uso excesivo. 

Ejemplo en linea

Referencias

https://reactjs.org/docs/react-api.html#reactpurecomponent
https://reactjs.org/docs/react-api.html#reactcomponent