Cách sử dụng React.memo() như thế nào?

React.memo() là một higher order component (HOC) được sử dụng để ngăn chặn việc render lại không cần thiết của component. Nó cho phép bạn tối ưu hóa hiệu suất của các functional component bằng cách ghi nhớ kết quả render cuối cùng và chỉ re-render khi props thay đổi.

Để sử dụng React.memo(), bạn bọc component của mình với React.memo() như sau:

const MyComponent = React.memo(function MyComponent(props) {
  // Component sẽ chỉ re-render nếu props thay đổi
});

Khi một component được bọc bởi React.memo(), React sẽ kiểm tra xem props của component có thay đổi giữa các lần render hay không. Nếu không có sự thay đổi nào, React sẽ sử dụng lại kết quả render trước đó thay vì tạo ra một kết ...