React Memo

Sử dụng memo sẽ khiến React bỏ qua việc render một component nếu như props của nó không bị thay đổi.

Điều này có thể cải thiện hiệu suất.

Phần này sử dụng React Hooks. Hãy xem phần React Hooks để biết thêm thông tin về Hooks.

Vấn đề

Trong ví dụ sau, Todos component sẽ được render lại ngay cả khi todos không bị thay đổi.

index.js:

Todos.js:

Khi chúng ta click vào increment button, Todos component sẽ được render lại.

Nếu như component này phức tạp, thì nó có thể gây ra vấn đề về hiệu suất.

Giải pháp

Để sửa vấn đề này, chúng ta có thể sử dụng memo.

Sử dụng memo để giữ cho Todos component khỏi render lại một cách không cần thiết.

Bao bọc Todos component export trong memo:

index.js:

Todos.js:

Bây giờ Todos component chỉ render lại khi todos được truyền tới nó qua props được cập nhật.