Giới thiệu

useMemo là một hook được cung cấp bởi ReactJS. Nó được sử dụng để tối ưu hóa hiệu suất của ứng dụng React bằng cách tránh việc thực hiện lại các hàm tính toán phức tạp hoặc render lại các component không cần thiết.

Cú pháp của useMemo

Cú pháp của useMemo như sau:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Trong đó:

• computeExpensiveValue(a, b) là hàm tính toán phức tạp mà chúng ta muốn tránh việc thực hiện lại.
• [a, b] là mảng các biến phụ thuộc. Khi giá trị của bất kỳ biến nào trong mảng này thay đổi, useMemo sẽ thực hiện lại hàm tính toán.

Tại sao cần useMemo?

Khi làm việc với React, chúng ta thường xuyên phải đối mặt với việc render lại component. Điều này không phải lúc nào cũng tốt, đặc biệt là khi chúng ta có các hàm tính toán phức tạp hoặc các component lớn. Việc thực hiện lại những hàm này có thể làm giảm hiệu suất của ứng dụng.

Đó là lúc useMemo trở nên hữu ích. Bằng cách sử dụng useMemo, chúng ta có thể "nhớ" kết quả của hàm tính toán và chỉ thực hiện lại nó khi các biến phụ thuộc thay đổi.

Lỗi Re-render Khi Truyền Object Qua Component Con

Trong React, mỗi lần bạn thay đổi trạng thái của một component, nó sẽ gây ra một re-render. Điều này có thể gây ra vấn đề khi bạn truyền object qua component con.

Dưới đây là một ví dụ về cách lỗi này có thể xảy ra:

import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const value = { count };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <ChildComponent value={value} />
    </div>
  );
}

function ChildComponent({ value }) {
  console.log('ChildComponent re-rendered!');
  return <div>Count: {value.count}</div>;
}

Trong ví dụ trên, mỗi lần bạn nhấn nút "Increase Count", ParentComponent sẽ re-render và tạo ra một object value mới. Do đó, ChildComponent cũng sẽ re-render, ngay cả khi giá trị của value.count không thay đổi.

Giải pháp: Sử dụng useMemo

Để giải quyết vấn đề này, bạn có thể sử dụng hook useMemo của React. useMemo sẽ trả về một giá trị được ghi nhớ mà chỉ thay đổi khi một trong các giá trị phụ thuộc thay đổi.

Dưới đây là cách bạn có thể sửa đổi ParentComponent để sử dụng useMemo:

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

function ParentComponent() {
  const [count, setCount] = useState(0);

  const value = useMemo(() => ({ count }), [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <ChildComponent value={value} />
    </div>
  );
}

Bây giờ, value chỉ được tạo lại khi count thay đổi. Do đó, ChildComponent chỉ sẽ re-render khi value.count thay đổi, giúp cải thiện hiệu suất của ứng dụng.

Kết luận

useMemo là một công cụ mạnh mẽ giúp chúng ta tối ưu hóa hiệu suất của ứng dụng React. Tuy nhiên, hãy nhớ rằng không nên lạm dụng nó. Chỉ sử dụng useMemo khi thực sự cần thiết, tức là khi bạn đang đối mặt với một vấn đề về hiệu suất và biết rằng việc sử dụng useMemo có thể giải quyết vấn đề đó.