shouldComponentUpdate trong React khi nào nên sử dụng?

Trong React, lifecycle là tập hợp các method và chúng được thực thi vào một thời điểm nhất định, chúng bao gồm các method có thể kể ra như: componentDidMount(), shouldComponentUpdate(), componentWillUnmount(),...

Hôm nay chúng ta cùng tìm hiểu về một method có thể giúp cải thiện performance cho trang web, đó là method shouldComponentUpdate(), nghe cái tên thôi chúng ta cũng phần nào hình dung về nhiệm vụ của method này rồi đúng không 😅.

shouldComponentUpdate() trong React

shouldComponentUpdate() được thực thi trước khi một component re-render, nó sẽ được gọi khi state hoặc props của component này thay đổi.

Theo mặc định, mỗi khi parent component re-render sẽ kéo theo các child component re-render, khi state và props của component không đổi, nhưng vẫn phải re-render, đây là điều không cần thiết(ảnh hưởng đến hiệu suất) và chúng ta sẽ tìm cách để ngăn các lần re-render này ^^. Và shouldComponentUpdate() là một lựa chọn cho chúng ta trong việc ngăn re-render của một component 😁.

shouldComponentUpdate() nhận vào 2 tham số, tham số đầu tiên là nextProps sẽ được so sánh với this.props, tham số thứ 2 là nextState so sánh với this.state. Nếu một trong 2 thay đổi so với trước đó thì component sẽ re-render.

shouldComponentUpdate(nextProps, nextState)

Theo mặc định thì shouldComponentUpdate() sẽ return về true, tức là sẽ re-render khi parent component re-render, kể cả props và state của nó không đổi.

Dưới đây là một ví dụ sử dụng method này:

shouldComponentUpdate(nextProps, nextState) {
  if (this.props.name !== nextProps.name || 
     this.state.count !== nextState.count
     ) {
    return true; // re-render
  }

  return false;
}

Các bạn nên lưu ý rằng việc return false sẽ không ngăn các child components re-render khi state của chúng thay đổi.

Ví dụ parent component ta set shouldComponentUpdate(){ return false; };. Có nghĩa là parent component sẽ bỏ qua re-render và vì thế các child component không bị re-render. Nếu child component có state thay đổi ví dụ như khi sử dụng các event như onChange, onClick,... Thì child component này vẫn sẽ bị re-render bất kể parent component sử dụng shouldComponentUpdate(){ return false; };.

Cùng xem một ví dụ dưới đây:

Các bạn có thể thấy Counter sử dụng shouldComponentUpdate() sẽ không bị re-render khi parent thay đổi state. Để quan sát rõ hơn thì các bạn click vào clear Console và click vào button Increment.

Bằng cách sử dụng shouldComponentUpdate() ta có thể hạn chế được các re-render component không cần thiết, điều này sẽ giúp trang web của chúng ta cải thiện được hiệu suất.

Các bạn có thể đọc thêm các bài viết liên quan đến re-render component dưới đây:

• Cách sử dụng React Context hiệu quả tránh các re-render component không cần thiết.
• React memo là gì? Hạn chế re-render component với React memo.
• Shallow Compare trong React là gì?.

Kết luận

Hy vọng bài viết giúp ích cho các bạn. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé ^^.

Chúc các bạn học tốt.