Quais as diferenças entre Stateless e Pure Components?

Uma das primeiras duvidas que tive durante minha jornada como desenvolvedor iniciante foi sobre quando/por quê utilizar Components, Pure Components e Stateless Components.

Pois bem, durante minhas indagações, acabei fazendo diversas pesquisas na internet até formular uma maneira bem mastigável e aplicável de entender as diferenças entre seus conceitos e utilidades.

Quando estamos trabalhando com desenvolvimento de Front-End, uma das grandes preocupações é em como executar uma aplicação de forma performática dentro dos limites dos navegadores. E é neste ponto que os Pure Components brilham de verdade.

Ao trabalharmos com Pure Components, estamos alterando a forma que o React trabalha com a função shouldComponentUpdate de forma que este componente só irá chamar o render() quando houver uma alteração OU nas props OU no state.

Esta é a principal diferença entre um Pure Component e um Stateless Component. O Pure Component utiliza de um shallowEqual por detrás dos panos para fazer uma comparação leve e decidir se o componente deve ou não ser renderizado novamente.

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

Em razão do uso de shallowEqual, é recomendado que um Pure Component não tenha componentes filhos, isso se dá pois o retorno da comparação mais rasa sempre será false para elementos criados em JSX e que possuem elementos-filhos.

Um Pure Component também herda as funções de ciclo de vida do React, enquanto um Stateless Component não.

Mas como estas características se diferem na prática?

Pense em uma tela com diversos cards. Dentro deles, temos informações variadas como nome, idade, cidade e emprego. Considere também que estes cards são paginados e apresentados em tela de 10 em 10.

Essa situação é ideal para o uso de um Pure Component a fim de que as informações que se mantiverem iguais não sejam re-renderizadas, melhorando considerávelmente o desempenho de nossa lista de cards.

Agora, Stateless Components têm sua aplicação ideal em componentes menores, por exemplo, uma tag anexada ao card que apresente a informação admin ou membro. Isso se dá porque:

1. É uma view muito pequena para ter a real necessidade de componentizar.
2. A perda de desempenho é muito pequena para uma UI deste tamanho.
3. As funções de ciclo de vida não serão necessárias neste pequeno componente.

Conclusão

Analisar a situação é sempre o melhor passo para aplicar um Pure ou Stateless Component. Porém, se tivermos de criar uma regra de ouro, seria:

• Pure Components são ideais para se ganhar performance e reduzir a quantidade de renderizações que um componente realizará durante seu ciclo de vida.
• Stateless Components têm um código mais legível/simples, e fazem um papel ideal para pequenos componentes, evitando a separação (e eventual caos total) do seu projeto em muitos arquivos pequenos.

Espero que minhas pequisas possam ajudar do mesmo jeito que me ajudaram.

Até!