useMemo
Written on 27th December 2025 by Carter Phan.
ReactJs / NextJs
useMemo Hook cho phép bạn lưu lại kết quả tính toán của một hàm vào bộ nhớ giữa các lần re-render của component và chỉ thay đổi khi các sự phụ thuộc được thay đổi.
Có thể sử dụng useMemo để ngăn việc thực thi lại hàm mỗi lần component render lại. Điều này có ý nghĩa khi hàm của bạn thực hiện các thao tác nặng và tốn tài nguyên.
const WithoutUseMemo = ({ products }) => {
const [state, setState] = useState(0)
/*
* Giả sử việc tính toán của hàm calculateBigTotalPrice vô cùng lâu,
* nó sẽ luôn được thực thi mỗi lần WithoutUseMemo re-render.
* Điều này có thể gây ra vấn đề về hiệu năng của ứng dụng
*/
const totalPrice = calculateBigTotalPrice(products)
};
const WithUseMemo = ({ products }) => {
const [state, setState] = useState(0)
/*
* useMemo sẽ giúp cache lại kết quả của lần tính toán trước đó.
* Hàm calculateBigTotalPrice sẽ chỉ được thực thi khi products thay đổi.
*/
const totalPrice = useMemo(
() => calculateBigTotalPrice(products),
[products]
)
};