Hướng dẫn tối ưu re-render trong React với useMemo và useCallback

Trong quá trình phát triển dự án với React, việc component bị render lại (re-render) nhiều lần là điều khó tránh khỏi. Tuy nhiên, nếu một component con nhận props không thay đổi nhưng vẫn bị re-render do component cha cập nhật state, ứng dụng của bạn đang lãng phí tài nguyên.

Chúng ta hãy cùng xem xét hai hooks phổ biến nhất để giải quyết vấn đề này.

1. Khi nào nên dùng useMemo?

useMemo giúp cache lại (ghi nhớ) kết quả của một phép tính toán nặng. Thay vì tính lại từ đầu mỗi khi component render, React sẽ kiểm tra xem các dependencies có thay đổi hay không. Nếu không, nó sẽ trả về kết quả đã lưu trước đó.

Hình 1: Tối ưu hóa code giúp cải thiện hiệu suất đáng kể.

Ví dụ, bạn có một danh sách hàng nghìn sản phẩm và cần lọc nó dựa trên từ khóa tìm kiếm. Việc lọc này nên được bao bọc trong useMemo.

2. Sức mạnh của useCallback

Tương tự như useMemo, nhưng useCallback dùng để cache lại chính cái function (hàm) đó, chứ không phải kết quả của hàm.

Hình 2: useCallback giúp giữ nguyên tham chiếu của hàm giữa các lần render.

Điều này cực kỳ quan trọng khi bạn truyền một hàm callback từ component cha xuống component con, đặc biệt nếu component con đó được tối ưu bằng React.memo. Nếu không dùng useCallback, mỗi lần cha render, nó tạo ra một hàm mới, khiến con nghĩ là props thay đổi và render lại một cách vô ích.