Cách sử dụng useMemo()
Dinh Vo
Posted on August 3, 2022
useMemo() được build bởi React hook và chấp nhận 2 argument- một function và mảng dependencies.
const memoizedResult = useMemo(compute, dependencies);
Trong quá trình render lần đầu, useMemo(compute,dependencies)
ngay lập tức gọi compute
, ghi nhớ value đã return cho vào memorizes, và trả về component.
Nếu trong suốt quá trình renderings, các dependencies không thay đổi, useMemo()
không gọi compute
mà return memorized value.
Nhưng nếu các dependencies thay đổi trong quá trình re-rendering, useMemo()
sẽ gọi compute
, nó sẽ update một value mới vào memorizes, và trả về value đó.
Ví dụ useMemo()
Một component nhằm tính giai thừa của một số.
import { useState } from 'react';
export function CalculateFactorial() {
const [number, setNumber] = useState(1);
const [inc, setInc] = useState(0);
const factorial = factorialOf(number);
const onChange = event => {
setNumber(Number(event.target.value));
};
const onClick = () => setInc(i => i + 1);
return (
<div>
Factorial of
<input type="number" value={number} onChange={onChange} />
is {factorial}
<button onClick={onClick}>Re-render</button>
</div>
);
}
function factorialOf(n) {
console.log('factorialOf(n) called!');
return n <= 0 ? 1 : n * factorialOf(n - 1);
}
Mỗi khi bạn thay đổi giá trị input, factorialOf(n)
và factorialOf(n)
được gọi.
Ben cạnh đó, mỗi lần bạn nhấn re-render, set state inc
sẽ được update và component <CalculateFactorial/>
sẽ được re-rendering. Nhưng, trong lần render thứ 2, factorialOf(n)
được gọi lại lần nữa.
Vậy làm thế nào có thể ghi nhớ factorial
khi componnent re-renders?
Bằng cách sử dụng useMemo(()=>factorialOf(number),[number])
thay vì đơn giản factorialOf(number)
, React sẽ ghi nhớ factorial
Ví dụ
import { useState, useMemo } from 'react';
export function CalculateFactorial() {
const [number, setNumber] = useState(1);
const [inc, setInc] = useState(0);
const factorial = useMemo(() => factorialOf(number), [number]);
const onChange = event => {
setNumber(Number(event.target.value));
};
const onClick = () => setInc(i => i + 1);
return (
<div>
Factorial of
<input type="number" value={number} onChange={onChange} />
is {factorial}
<button onClick={onClick}>Re-render</button>
</div>
);
}
function factorialOf(n) {
console.log('factorialOf(n) called!');
return n <= 0 ? 1 : n * factorialOf(n - 1);
}
Mỗi lần ấn button Re-render
, factorial(n)
không được in ra màn hình console bởi vì useMemo
returns memorized của factorial
Kết luận
useMemo(()=>computation(a,b),[a,b])
cho phép bạn ghi nhớ các phép tính lưu vào vùng nhớ memorize. Với các dependencies [a,b] giống nhau, hook sẽ trả về memorized value mà không cần gọi computation(a,b)
Posted on August 3, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.