useMemo là gì? Hướng dẫn sử dụng React useMemo Hook

Khi dùng React, hầu hết chúng không bận tâm đến việc tối ưu code vì bản thân nó đã khá nhanh. Trong bài viết hôm nay, chúng ta sẽ cùng xem qua cách sử dụng useMemo trong React để tối ưu tốc độ chương trình, hiểu và biết cách sử dụng useMemo sẽ giúp ích cho bạn trong sự nghiệp developer của mình đấy!

useMemo là gì?

useMemo là một hook trong React được sử dụng để ghi nhớ kết quả của một phép tính tốn kém (expensive calculation) và chỉ thực hiện lại phép tính đó khi các dependencies thay đổi. Hook này giúp tối ưu hóa hiệu suất bằng cách tránh việc thực hiện lại các phép tính không cần thiết mỗi khi component re-render.

Cú pháp sử dụng useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Trong đó:

  • computeExpensiveValue: Hàm tính toán mà bạn muốn ghi nhớ kết quả.
  • [a, b]: Danh sách các dependencies. Kết quả được ghi nhớ sẽ chỉ được tính lại khi một trong các dependencies này thay đổi.

Ví dụ

Ví dụ sử dụng useMemo
Ví dụ sử dụng useMemo

Trong ví dụ này, giá trị expensiveValue sẽ chỉ được tính toán lại khi giá trị của a hoặc b thay đổi. Điều này giúp tối ưu hóa hiệu suất của component bằng cách tránh các tính toán lại không cần thiết.

Khi nào sử dụng useMemo

Khi có những tính toán để lấy giá trị khá mất công, chúng ta lưu kết quả tính lại cho tiết kiệm thời gian tính toán.

Đừng dùng nhầm với React.memo và useCallback, chúng nó được dùng vào những mục đích rất khác nhau.

>> Xem thêm: Khi nào nên sử dụng useMemo và useCallback trong React?

Thông tin tuyển dụng lập trình React hấp dẫn tại đây

Bài viết gốc được đăng tải tại vuilaptrinh.com

Có thể bạn quan tâm:

Xem thêm xin việc công nghệ thông tin hấp dẫn tại TopDev