Pitfall

Recomendamos definir componentes como funções em vez de classes. Veja como migrar.

PureComponent é semelhante a Component, mas ignora re-renderizações para as mesmas props e estado. Os componentes de classe ainda são suportados pelo React, mas não recomendamos o uso deles em novo código.

class Greeting extends PureComponent {
  render() {
    return <h1>Olá, {this.props.name}!</h1>;
  }
}

Referência

PureComponent

Para pular a re-renderização de um componente de classe para as mesmas props e estado, estenda PureComponent em vez de Component:

import { PureComponent } from 'react';

class Greeting extends PureComponent {
  render() {
    return <h1>Olá, {this.props.name}!</h1>;
  }
}

PureComponent é uma subclasse de Component e suporta todas as APIs de Component. Estender PureComponent é equivalente a definir um método customizado shouldComponentUpdate que compara superficialmente props e estado.

Veja mais exemplos abaixo.

Uso

Ignorando re-renderizações desnecessárias para componentes de classe

O React normalmente re-renderiza um componente sempre que seu pai re-renderiza. Como uma otimização, você pode criar um componente que o React não re-renderiza quando seu pai re-renderiza, desde que suas novas props e estado sejam iguais às antigas props e estado. Os componentes de classe podem optar por esse comportamento estendendo PureComponent:

class Greeting extends PureComponent {
  render() {
    return <h1>Olá, {this.props.name}!</h1>;
  }
}

Um componente React deve sempre ter lógica de renderização pura. Isso significa que ele deve retornar a mesma saída se suas props, estado e contexto não tiverem mudado. Ao usar PureComponent, você está dizendo ao React que seu componente cumpre esse requisito, para que o React não precise re-renderizar enquanto suas props e estado não mudarem. No entanto, seu componente ainda re-renderizará se um contexto que ele está usando mudar.

Neste exemplo, note que o componente Greeting re-renderiza sempre que name é alterado (porque essa é uma de suas props), mas não quando address é alterado (porque não é passado para Greeting como uma prop):

import { PureComponent, useState } from 'react';

class Greeting extends PureComponent {
  render() {
    console.log("Greeting foi renderizado em", new Date().toLocaleTimeString());
    return <h3>Olá{name && ', '}{this.props.name}!</h3>;
  }
}

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Nome{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Endereço{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Pitfall

Recomendamos definir componentes como funções em vez de classes. Veja como migrar.

Alternativas

Migrando de um componente de classe PureComponent para uma função

Recomendamos usar componentes de função em vez de componentes de classe em novo código. Se você tiver alguns componentes de classe existentes usando PureComponent, aqui está como você pode convertê-los. Este é o código original:

import { PureComponent, useState } from 'react';

class Greeting extends PureComponent {
  render() {
    console.log("Greeting foi renderizado em", new Date().toLocaleTimeString());
    return <h3>Olá{name && ', '}{this.props.name}!</h3>;
  }
}

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Nome{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Endereço{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Quando você converter este componente de uma classe para uma função, encapsule-o em memo:

import { memo, useState } from 'react';

const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting foi renderizado em", new Date().toLocaleTimeString());
  return <h3>Olá{name && ', '}{name}!</h3>;
});

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Nome{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Endereço{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Note

Diferente de PureComponent, memo não compara o novo e o antigo estado. Em componentes de função, chamar a função set com o mesmo estado já previne re-renderizações por padrão, mesmo sem memo.

PreviousisValidElement