Quais as diferenças entre Stateless e Pure Components?
Tags: portugues, ptbr, react, frontend
Published: 2019-03-07 21:10:56

---
title: Quais as diferenças entre Stateless e Pure Components?
published: true
description: Explicando de forma simples quais as diferenças entre Stateless Components e Pure Components.
tags: Portugues, PT-BR, React, Front-End
---

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.

~~~~js
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é!