useMemo
- useMemo tránh cho việc tính toán lại một function lặp đi lặp lại nhiều lần mỗi lần component re-render.
- Bản chất useMemo là caching lại giá trị return của function,
- useMemo cho phép truyền vào 2 tham số: callback và dependencies, tại lần call đầu tiên, callback sẽ được gọi và cached lại giá trị trả về
- Sau đó, mỗi khi bạn gọi lại useMemo, nó sẽ kiểm tra nếu bất kì khi nào dependencies thay đổi nó sẽ gọi lại callback để thực thi nó
- Nếu không, nó sẽ trả về giá trị cũ đã được lưu trong bộ nhớ cache, không gọi hàm callback.
- Sự khác biệt duy nhất là useEffect được dành cho side-effects, trong khi các function của useMemo được cho là tinh khiết (pure) và không có side-effects.
sử dụng
import React, { useMemo } from 'react'
const memoizedValue = useMemo(() => expensiveOperation(param), [param]);
Khi nào chúng ta nên sử dụng useMemo?
Đầu tiên, việc này rất quan trọng, code của bạn không phụ thuộc vào useMemo.
Nói cách khác, bạn nên thay thế useMemo bằng các hàm gọi trực tiếp và không thay đổi bất kì điều gì ảnh hưởng đến Project, trừ khi nó ảnh hưởng nhiều đến hiệu năng.
Cách tốt nhất để làm điều này là hãy suy nghĩ cách viết mã mà không cần dùng đến useMemo trước. Sau đó, hãy thêm nó vào nếu cần thiết.
Bản chất useMemo là caching lại giá trị return, hãy tập trung vào điều này, dưới đây là 1 function coi là expensive operation:
function ListedAllNumber({length}) { console.log("calculating..."); let numbers = []; for(let i = 0; i < length; i++) { numbers.push(i); return <p>Listed number: {numbers.join(",")}</p>
}
Nếu áp dụng useMemo:
function ListedAllNumber({length}) { console.log("calculating..."); let numbers = useMemo(() => { let results = []; for(let i = 0; i < length; i++) { results.push(i); return results; }, [length]) return <p>Listed number: {numbers.join(",")}</p>
}
Bằng việc sử dụng useMemo, Array [numbers] không còn tốn thời gian để tính toán nếu [length] không thay đổi.
Không lạm dụng useMemo
Mặc dù tối ưu hiệu suất là một mục tiêu cao cả, bạn vẫn nên cân nhắc những tác động và tác dụng phụ nó mang đến. Trong trường hợp đó:
- đi kèm với cache lại giá trị return chính là vấn đề về bộ nhớ:
Chưa kể đến cách code có đúng hay không, việc áp dụng thôi đã phát sinh thêm tài nguyên rồi, việc lạm dụng useMemo sẽ gây hại cho hiệu suất. - không đảm bảo:
việc lưu lại giá trị của useMemo rất hữu ích trong một số trường hợp, nhưng bên cạnh đó cũng có những trường hợp yêu cầu phải chạy function, không chỉ là kết quả trả về.
Khi thêm function vào useMemo, hãy chú ý điều này.
kết luận
- useMemo được dùng để cache lại kết quả của các function tính toán phức tạp
- Tuy nhiên nó cũng đang sử dụng thêm tài nguyên, nên hãy dùng nó cẩn thận
- Có những function yêu cầu phải chạy lại, không chỉ là kết quả trả về