Senior - Làm sao để ngăn các component re-render?

Người phỏng vấn muốn thấy: nhiều kiến thức hơn về Reactjs và cách bạn quan tâm về hiệu suất.

Đây là một trong các câu hỏi thường gặp nhất. Đáng để nhắc đến là:

1. shouldComponentUpdate() - Mặc định return về “true” ( return true là re-render và ngược lại), bạn có thể thay đổi giá trị return nếu bạn biết props nào sẽ kích hoạt update.
2. PureComponents - Sự khác biệt giữa React.Component và React.PureComponent là React.Component không tự thực hiện shouldComponentUpdate nhưng React.PureComponent sẽ tự thực hiện nó với 1 phép so sánh giữa prop với state.
3. React.memo - Tương tự như PureComponent nhưng nó được ứng dụng cho functional component.

Khi nào thì dùng Component thay vì PureComponent?

99% các trường hợp bạn sẽ dùng PureComponent trong React. Tuy nhiên, nếu bạn làm việc với Redux selector, thường thì bạn cần chỉ định rõ ràng những props thay đổi nào để hủy việc re-render, trong trường hợp đó, Component là thích hợp để sử dụng. 

Một số chủ đề thú vị có thể bạn thích:

- Giới thiệu useState và useEffect-useRef trong React Hooks