Sử dụng useMemo trong React Js
Để sử dụng useMemo trong React Js, ta sẽ import nó từ thư viện react và sử dụng như một hook bình thường. Cú pháp sử dụng của useMemo như sau:
const memoizedValue = useMemo(() => {
// trả về giá trị cần memoize
}, [dependencies]);
Trong đó, memoizedValue sẽ chứa giá trị đã được memoize và tái sử dụng, còn dependencies là một mảng chứa các giá trị phụ thuộc. Khi các giá trị trong mảng này thay đổi, useMemo sẽ tính toán lại giá trị memoized.
Ví dụ về useMemo trong React Js
Ví dụ, để tính toán tổng của một mảng số, ta có thể sử dụng useMemo như sau:
const sum = useMemo(() => {
console.log('Calculating sum...');
return numbers.reduce((a, b) => a + b);
}, [numbers]);
Trong ví dụ trên, sum sẽ chứa giá trị tổng của mảng numbers sau khi tính toán. Nếu numbers không thay đổi, giá trị của sum sẽ được memoize và không cần tính toán lại. Khi numbers thay đổi, useMemo sẽ tính toán lại giá trị của sum.
Lưu ý rằng useMemo chỉ nên được sử dụng khi việc tính toán là phức tạp và tốn nhiều thời gian, để tránh việc tăng thời gian render không cần thiết.
Kết luận và bài viết có liên quan
Bài viết có liên quan: Tìm hiểu useMemo trong React Js Tìm hiểu useContext với Redux.
Tìm hiểu về Redux Toolkit, một phiên bản mới của Redux trong React Js
