Các mẹo tối ưu hiệu năng React App không thể bỏ qua

React là một thư viện tuyệt vời để xây dựng giao diện người dùng nhanh chóng. Tuy nhiên, khi ứng dụng phình to, các vấn đề về hiệu năng do render thừa thải (wasteful re-renders) sẽ bắt đầu xuất hiện.

Dưới đây là một số kỹ thuật thực chiến giúp bạn tối ưu hóa hiệu năng ứng dụng React của mình.

---

1. Tránh Render thừa với React.memo

Mặc định, khi một component cha render lại, toàn bộ component con của nó cũng sẽ render theo, bất kể props của component con có thay đổi hay không.

Để ngăn chặn điều này, bạn có thể bọc component con bằng React.memo:

import React from 'react';

const ExpensiveComponent = React.memo(({ data }) => {
  // Component này chỉ render lại khi prop 'data' thay đổi
  return <div>{data.label}</div>;
});

---

2. Ghi nhớ các hàm và giá trị với useCallback và useMemo

Khi truyền mảng, object hoặc hàm dưới dạng props xuống component con, React sẽ coi chúng là các tham chiếu mới ở mỗi lần render. Điều này làm mất tác dụng của React.memo.

Hãy dùng useMemo cho dữ liệu phức tạp và useCallback cho hàm callback:

import { useMemo, useCallback } from 'react';

const MyParent = ({ items }) => {
  // Ghi nhớ mảng đã được lọc để tránh tính toán lại vô ích
  const activeItems = useMemo(() => {
    return items.filter(item => item.isActive);
  }, [items]);

  // Ghi nhớ hàm xử lý click để không tạo lại hàm mới mỗi lần render
  const handleClick = useCallback((id) => {
    console.log('Clicked item:', id);
  }, []);

  return <ExpensiveComponent items={activeItems} onClick={handleClick} />;
};

---

3. Chia nhỏ Bundle bằng Dynamic Import & React.lazy

Nếu ứng dụng của bạn có nhiều trang hoặc modal nặng, việc gộp tất cả code vào một file bundle lớn sẽ làm tăng thời gian tải trang đầu tiên (FCP).

Hãy chia nhỏ bundle bằng cách import động:

import React, { Suspense, lazy } from 'react';

const HeavyDashboard = lazy(() => import('./HeavyDashboard'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Đang tải bảng điều khiển...</div>}>
        <HeavyDashboard />
      </Suspense>
    </div>
  );
}

---

4. Tổng kết

Việc tối ưu hiệu năng không nên làm từ đầu một cách mù quáng (premature optimization). Hãy sử dụng công cụ React Profiler trong Chrome DevTools để đo đạc và tìm ra chính xác các điểm nghẽn (bottleneck) trước khi áp dụng các kỹ thuật trên.

Chúc các bạn xây dựng những ứng dụng React mượt mà!