Component vs Pure.Component

Như bạn biết trong lifecycle của React có một function tên là shouldComponentUpdate() dùng để kiểm tra xem có tiến hành re-render lại component đó không. Với Component thông thường thì mặc định function này sẽ luôn trả về true đồng nghĩa với việc component của bạn sẽ được re-render lại kể cả khi không có sự thay đổi về state hay props của nó. Để rõ hơn bạn có thể xem ví dụ sau:

class App extends React.Component {
  state = {
    firstComponentName: "DefaultComponent",
    secondComponentName: "PureComponent",
    counter: 0
  };

  handleIncrement = () => {
    this.setState(prevState => ({
      counter: prevState.counter + 1
    }));
  };

  render() {
    return (
      <div className="App">
        <p>You click: {this.state.counter} time</p>
        <DefaultComponent componentName={this.state.firstComponentName} />
        <PureComponent componentName={this.state.secondComponentName} />

        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

class DefaultComponent extends React.Component {
  componentDidUpdate() {
    console.log("Re-render DefaultComponent");
  }

  render() {
    return <h1>{this.props.componentName}</h1>;
  }
}

class PureComponent extends React.PureComponent {
  componentDidUpdate() {
    console.log("Re-render PureComponent");
  }

  render() {
    return <h1>{this.props.componentName}</h1>;
  }
}

Như bạn thấy ở đây mình có 1 component cha là <App /> và 2 component con là <DefaultComponent /> và <PureComponent />. 2 component con này lần lượt sẽ là React.Component và React.PureComponent và nhận vào props và componentName từ component <App />. Trong mỗi component mình đã thêm hàm componentDidUpdate() và console.log ra nếu component đó bị re-render. Ngoài ra thì component <App /> còn có một state là counter và một nút cho phép tăng giá trị này lên. Mỗi khi ta bấm nút đó thì sẽ những thứ sẽ xảy ra như sau:

• state.counter bị thay đổi - cộng thêm một vào giá trị ban đầu
• Việc thay đổi state này sẽ dẫn đến component <App /> bị render lại
• Dẫn đến <DefaultComponent /> cũng bị render lại do React.Component thì shouldComponentUpdate() luôn trả về true.
• <PureComponent /> không bị render lại (bạn có thể check phần console.log() để biết phần nào bị render lại
• Hết =))
  

Sở dĩ component PureComponent không bị re-render là do hàm shouldComponentUpdate() của nó không mặc định trả về true mà ở đây nó tự động thực hiện cái gọi là shallow compare. Cụ thể nó sẽ so sánh dạng như sau:

shouldComponentUpdate(nextProps, nextState) {
    return this.props.componentName !== nextProps.componentName 
} 

• Do ở đây prop ta truyền vào là componentName không hề bị thay đổi nên hàm này sẽ trả về false và component này sẽ không bị re-render này. Link demo: https://codesandbox.io/s/component-vs-purecomponent-fqv1x