Khái niệm useMemo

useMemo là một React hook được sử dụng để ghi nhớ các phép tính tốn nhiều chi phí/hiệu năng để chúng chỉ được tính toán lại khi cần thiết. Điều này có thể giúp tối ưu hóa hiệu suất bằng cách ngăn chặn việc tính toán lại không cần thiết, đặc biệt trong trường hợp việc tính toán liên quan đến các nghiệp vụ tốn hiệu năng hoặc xử lý dữ liệu phức tạp.

Ví dụ:

import React, { useState, useMemo } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  // Expensive calculation function
  const calculateExpensiveValue = (value) => {
    console.log('Calculating expensive value...');
    // Example of an expensive calculation
    return value * 2;
  };

  // Memoized result of the expensive calculation
  const memoizedValue = useMemo(() => calculateExpensiveValue(count), [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Memoized Value: {memoizedValue}</p>
    </div>
  );
};

export default MyComponent;

Thành phần MyComponent duy trì trạng thái biến count.
Hàm calculateExpensiveValue thực hiện một phép tính tốn hiệu năng (trong trường hợp này, chỉ cần nhân đôi giá trị đầu vào).
Chúng ta sử dụng useMemo để ghi nhớ kết quả của calculateExpensiveValue(count), để nó chỉ được tính toán lại khi trạng thái đếm thay đổi.
Giá trị được ghi nhớ sau đó được hiển thị trong thành phần.
Với useMemo, phép tính tốn chi phí chỉ được thực hiện khi số lượng thay đổi, tránh việc tính toán lại không cần thiết trên mỗi lần kết xuất. Điều này có thể đặc biệt hữu ích để tối ưu hóa hiệu suất trong các thành phần có tính toán phức tạp hoặc các hoạt động tốn chi phí.

Tình huống ưu tiên sử dụng useMemo

Chúng ta chỉ nên sử dụng useMemo trong tình huống nghiệp vụ tốn nhiều chi phí, hiệu năng, nếu không thì không nên quá lạm dụng, tránh trường hợp tăng thời gian triển khai dự án chỉ để tiết kiệm phần nhỏ hiệu năng không cần thiết.