Componentes puros no React: como funcionam e quando usá-los

Componentes puros no React são todos sobre desempenho. Eles ajudam sua aplicação a evitar re-renderizações desnecessárias verificando se as entradas do componente (props ou state) realmente mudaram. Neste artigo, veremos como os componentes puros funcionam, como usá-los e quando são úteis — com exemplos claros e modernos.

O que é um componente puro?

Um componente puro é um componente que só re-renderiza quando suas props ou state mudaram. O React determina se deve re-renderizar fazendo uma comparação superficial das props/state atuais com as anteriores.

Usando React.PureComponent

React.PureComponent é o equivalente em componente de classe a uma função pura. Ele implementa um método shouldComponentUpdate() integrado que realiza uma comparação superficial.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Se this.props.text não mudou, o componente não será re-renderizado.

Alternativa funcional: React.memo

Para componentes funcionais, use React.memo().

const MyComponent = React.memo(function MyComponent({ text }) {
  return <div>{text}</div>;
});

O React ignorará a renderização se text for o mesmo da renderização anterior.

Como funciona a comparação superficial

Uma comparação superficial significa:

• Valores primitivos (como números ou strings) são comparados por valor
• Objetos e arrays são comparados por referência

{ a: 1 } === { a: 1 } // false
const obj = { a: 1 }
obj === obj // true

Então, se você estiver passando um objeto que é mutado em vez de recriado, um componente puro pode não perceber a mudança.

Exemplo do mundo real

Sem otimização

const Item = ({ data }) => <div>{data.label}</div>;

Isso será re-renderizado sempre que o componente pai re-renderizar, mesmo que data não tenha mudado.

Com React.memo

const Item = React.memo(({ data }) => <div>{data.label}</div>);

Agora o componente só re-renderiza quando data é um novo objeto.

Quando usar PureComponent ou memo

• Você está renderizando listas com muitos itens
• As props do componente permanecem estáveis entre renderizações
• Você quer reduzir ciclos de renderização em partes da sua aplicação sensíveis ao desempenho
• Você está usando useCallback ou useMemo para preservar referências

Armadilhas comuns

• A comparação superficial não detecta mudanças profundas (objetos/arrays aninhados)
• Não use a menos que você esteja confiante de que as props não sofrem mutações silenciosas
• Pode introduzir bugs se você passar referências instáveis

React.memo vs React.PureComponent

Recurso React.PureComponent React.memo Tipo de componente Componente de classe Componente funcional Lógica de comparação Props + state (superficial) Apenas props (superficial) Função de comparação personalizada ❌ ✅ React.memo(fn) Uso moderno Menos comum Amplamente utilizado

Conclusão

Componentes puros podem ajudar o React a pular re-renderizações e manter sua UI performática — mas não são uma solução milagrosa. Prefira React.memo para componentes funcionais e entenda que a comparação superficial significa que as referências importam. Use quando o desempenho for importante e as props forem estáveis.

Perguntas Frequentes