👁️Sử dụng useCallback và useMemo để tối ưu hóa hiệu suất trong React

useCallback và useMemo là hai hook (móc) trong React giúp tối ưu hóa hiệu suất bằng cách gợi nhớ và tái sử dụng các hàm (function) và giá trị tính toán.

1. useCallback:

• Mục đích: Gợi nhớ và tái sử dụng hàm để tránh tạo hàm mới mỗi khi component render.

• Sử dụng: Khi hàm được truyền vào prop của một component con hoặc được sử dụng trong một event handler.

• Ví dụ:

JavaScript

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

const Counter = () => {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount(count + 1), [count]);

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

Hãy thận trọng khi sử dụng các đoạn mã.content_copy

2. useMemo:

• Mục đích: Gợi nhớ và tái sử dụng giá trị tính toán để tránh tính toán lại mỗi khi component render.

• Sử dụng: Khi giá trị tính toán dựa trên props hoặc state và không thay đổi giữa các lần render.

• Ví dụ:

JavaScript

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

const ExpensiveComponent = () => {
  // Giả sử computeData là hàm tính toán tốn kém
  const data = useMemo(() => computeData(props.data), [props.data]);

  return <div>{data}</div>;
};

Sự khác biệt:

Đặc điểm	useCallback	useMemo
Mục đích	Gợi nhớ hàm	Gợi nhớ giá trị tính toán
Sử dụng	Truyền prop, event handler	Dựa trên props, state
Giá trị trả về	Hàm	Giá trị
Tính toán	Không tính toán	Có thể tính toán
Hiệu suất	Tối ưu hóa hiệu suất khi hàm thay đổi ít	Tối ưu hóa hiệu suất khi giá trị tính toán thay đổi ít

Lưu ý:

• Sử dụng useCallback và useMemo khi cần thiết, tránh lạm dụng vì có thể ảnh hưởng hiệu suất render.

• Sử dụng dependency array (mảng phụ thuộc) để xác định khi nào hàm hoặc giá trị cần được cập nhật.

Kết luận:

useCallback và useMemo là công cụ hữu ích để tối ưu hóa hiệu suất trong React bằng cách gợi nhớ và tái sử dụng hàm, giá trị tính toán. Việc sử dụng hợp lý hai hook này giúp giảm thiểu render không cần thiết, cải thiện tốc độ và trải nghiệm người dùng.

Ngoài ra, để tối ưu hóa hiệu suất trong React, bạn có thể:

• Tránh sử dụng state và prop không cần thiết.

• Sử dụng Immutable data structures (cấu trúc dữ liệu bất biến).

• Tối ưu hóa component.

• Sử dụng các thư viện tối ưu hóa hiệu suất như React DevTools, React Profiler.

Hiểu rõ cách sử dụng useCallback và useMemo, kết hợp với các biện pháp tối ưu hóa khác, sẽ giúp bạn viết code React hiệu quả, mượt mà và nhanh chóng hơn.