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

同じ props と state に対してクラスコンポーネントの再レンダーをスキップしたい場合、Component の代わりに PureComponent を継承します。

React は通常、親が再レンダーされるたびにコンポーネントを再レンダーします。最適化として、新しい props や state が古い props や state と同じである限り、親が再レンダーされても React が再レンダーを行わない、というコンポーネントを作成することができます。クラスコンポーネントでは、PureComponent を継承することにより、この挙動を有効化できます。

React コンポーネントは常に純粋なレンダーロジックを持つべきです。これはすなわち、その props、state、コンテクストが変わらない場合は、常に同じ出力を返す必要がある、という意味です。PureComponent を使用することで、あなたのコンポーネントがこの要件を満たしていると React に伝えることができ、そのため React は props と state が変わらない限り再レンダーする必要がないと判断します。ただし、使用しているコンテクストが変更された場合、コンポーネントは再レンダーされます。

以下の例で、name が変更されるたびに Greeting コンポーネントが再レンダーされる（name が props として渡されているため）が、address が変更されても再レンダーされない（Greeting に props として渡されていないため）ことに注目してください。