Sự khác nhau giữa useMemo và useCallback trong React Native

React cung cấp cho chúng ta 2 hooks là useMemo và useCallback, chúng rất hữu ích khi bạn xử lý với những hoạt động phức tạp, tốn nhiều thời gian và tài nguyên của ứng dụng. Để không nhầm lẫn và sử dụng hiệu quả hãy cùng tìm hiểu sự khác biệt giữa chúng và cách chính xác chúng hoạt động nhé !

useMemo và useCallback là hai hook được sử dụng để tối ưu hóa hiệu suất trong React Native. Chúng giúp tránh việc re-render component khi các giá trị không thay đổi.

Mục lục

1 useMemo
2 useCallback
3 Sự khác biệt giữa useMemo và useCallback
4 Kết luận

useMemo

useMemo được sử dụng để lưu trữ kết quả của một hàm hoặc expression và chỉ re-render component khi kết quả thay đổi.

Cú pháp của useMemo như sau:

deps là một mảng các dependencies, là các giá trị mà kết quả của hàm hoặc expression phụ thuộc vào. Khi các dependencies thay đổi, useMemo sẽ re-render component.

Ví dụ:

Trong ví dụ này, hàm sum tính tổng các số từ 1 đến count. count là một dependency của hàm sum. Vì vậy, khi count thay đổi, useMemo sẽ re-render component để cập nhật giá trị của sum.

useCallback

useCallback được sử dụng để lưu trữ một hàm và chỉ re-render component khi hàm thay đổi.

Cú pháp của useCallback như sau:

deps là một mảng các dependencies, là các giá trị mà hàm phụ thuộc vào. Khi các dependencies thay đổi, useCallback sẽ re-render component.

Ví dụ:

Trong ví dụ này, hàm increaseCount chỉ đơn giản là tăng count lên 1. increaseCount không phụ thuộc vào bất kỳ giá trị nào khác. Vì vậy, useCallback sẽ không re-render component khi count thay đổi.

Sự khác biệt giữa useMemo và useCallback

useMemo và useCallback đều được sử dụng để tối ưu hóa hiệu suất trong React Native. Tuy nhiên, chúng có một số điểm khác biệt sau:

useMemo lưu trữ kết quả của một hàm hoặc expression, trong khi useCallback lưu trữ một hàm.
useMemo re-render component khi các dependencies thay đổi, trong khi useCallback re-render component khi hàm thay đổi.

Khi nào nên sử dụng useMemo và useCallback:

useMemo nên được sử dụng khi bạn cần lưu trữ kết quả của một hàm hoặc expression và chỉ re-render component khi kết quả thay đổi. Ví dụ:

– Lưu trữ kết quả của một hàm tính toán phức tạp

– Lưu trữ kết quả của một hàm lấy dữ liệu từ API

useCallback nên được sử dụng khi bạn cần lưu trữ một hàm và chỉ re-render component khi hàm thay đổi. Ví dụ:

– Lưu trữ một hàm callback để sử dụng trong một button

– Lưu trữ một hàm callback để sử dụng trong một component khác

Kết luận

useMemo và useCallback là hai hook mạnh mẽ giúp bạn tối ưu hóa hiệu suất trong React Native. Chúng giúp tránh việc re-render component khi các giá trị không thay đổi, điều này có thể cải thiện đáng kể hiệu suất của ứng dụng của bạn.

Dưới đây là một số mẹo để sử dụng useMemo và useCallback hiệu quả:

Sử dụng useMemo để lưu trữ kết quả của các hàm tính toán phức tạp. Điều này sẽ giúp tránh việc re-render component mỗi khi hàm được gọi.
Sử dụng useCallback để lưu trữ các hàm callback. Điều này sẽ giúp tránh việc re-render component mỗi khi hàm callback được thay đổi.
Cẩn thận lựa chọn các dependencies cho useMemo và useCallback. Nếu bạn chọn quá nhiều dependencies, bạn có thể vô tình re-render component khi không cần thiết.

Với việc sử dụng useMemo và useCallback một cách hiệu quả, bạn có thể cải thiện đáng kể hiệu suất của ứng dụng React Native của mình.

Giảng viên Nguyễn Ngọc Chấn
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM