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

PureComponent는 Component의 모든 API를 지원하는 Component의 서브클래스 입니다. PureComponent를 extend 하는 것은 단순히 props와 state를 비교하는 사용자 shouldComponentUpdate 메서드를 정의하는 것과 같습니다.

React는 일반적으로 부모가 다시 렌더링 될 때마다 자식 컴포넌트도 다시 렌더링 합니다. 하지만 PureComponent를 extend 하여 새 props 및 state가 이전 props 및 state와 같다면 부모가 다시 렌더링 되더라도 자식 컴포넌트는 다시 렌더링 되지 않도록 Class component를 최적화할 수 있습니다.

React 컴포넌트에는 항상 순수한 렌더링 로직이 있어야 합니다. 즉, props, state 및 context가 변경되지 않은 경우 같은 출력을 반환해야 합니다. PureComponent를 사용하면 컴포넌트가 이 요구 사항을 준수한다고 React에게 알리므로 props 및 state가 변경되지 않는 한 React는 다시 렌더링하지 않습니다. 그러나 사용 중인 context가 변경된다면 컴포넌트는 다시 렌더링 됩니다.

이 예시에서 Greeting 컴포넌트는 name이 변경될 때마다 다시 렌더링 되지만 (props 중 하나이기 때문에) address가 변경될 때에는 다시 렌더링 되지 않습니다 (Greeting에 prop으로 전달되지 않기 때문에).