DEV Community

ITPrep
ITPrep

Posted on • Originally published at itprep.com.vn

Tối Ưu Hiệu Suất Ứng Dụng React: Đừng Để App Chạy Như 'Rùa Bò'!

#react #javascript #webdev #performance

Bài viết gốc được xuất bản tại ITPrep - Cẩm nang & Cheat Sheet Phỏng vấn IT.

Chào mừng anh em đến với thế giới tối ưu hiệu suất ứng dụng React! Trong môi trường web hiện đại, tốc độ phản hồi của UI là yếu tố sống còn. Một con app React giật lag không chỉ làm người dùng bực mình mà còn khiến anh em tự thấy "cấn cấn" khi review code.

Bài viết này dành cho các anh em Dev từ cấp độ cơ bản đến trung cấp muốn nâng trình. Sau khoảng 4-6 giờ thực hành các kỹ thuật dưới đây, anh em sẽ biết cách "bắt mạch" điểm nghẽn và làm cho app React của mình chạy mượt mà như lụa.

🚀 Tóm tắt nhanh: 6 "Bùa Hộ Mệnh" Tối Ưu React

Nếu app đang lag, khoan vội debug phức tạp, hãy rà soát ngay 6 "thần chú" cốt lõi này:

  • Dùng React.memo: Ngăn component Functional re-render khi props không thay đổi.
  • Dùng useCallback: Cache lại tham chiếu của function, tránh việc tạo mới hàm vô tội vạ ở mỗi lần render.
  • Dùng useMemo: Ghi nhớ kết quả của các phép tính toán logic nặng, tốn tài nguyên CPU.
  • Lazy Loading & Code Splitting: Đừng bắt user tải cục bundle to đùng, dùng tới đâu tải tới đó.
  • Virtualization (Windowing): Render list hàng ngàn item? Chỉ render những gì đang hiển thị trên màn hình thôi.
  • Tránh tạo Object/Array inline: Khai báo biến bên ngoài component để không phá vỡ tính chất của React.memo.

⚠️ Lưu ý: Lạm dụng useMemo hay useCallback đôi khi lại làm app chậm hơn. Cùng đi sâu vào phân tích nhé!

Phần 1: Hiểu Về Hiệu Suất & Cách "Đo Khám"

Điều gì khiến app React chậm? Thủ phạm chính thường là: Re-render không cần thiết, Cây component quá sâu, hoặc Tính toán nặng trong hàm render.

Để bắt đúng bệnh, anh em hãy cài ngay extension React DevTools Profiler. Nó cho phép bạn record lại các tương tác và vẽ ra biểu đồ ngọn lửa (Flamegraph) xem component nào mất bao nhiêu mili-giây để render. Kết hợp thêm Lighthouse của Chrome là chuẩn bài.

Phần 2: Các Kỹ Thuật Tối Ưu Cơ Bản (Kèm Code)

2.1. React.memo cho Functional Components

React.memo là một Higher-Order Component (HOC). Nó giúp "nhớ" kết quả render. Nếu props truyền xuống không đổi, React sẽ dùng lại kết quả cũ thay vì bắt component con render lại từ đầu. Cực kỳ hiệu quả cho các "Pure Component".

2.2. useCallback để Memoize Functions

Khi truyền một hàm từ component Cha xuống component Con (đã được bọc React.memo), hàm đó sẽ bị tạo lại tham chiếu (reference) mới mỗi khi Cha render. Hậu quả là Con hiểu nhầm props thay đổi và re-render theo. useCallback sinh ra để giữ nguyên tham chiếu của hàm đó.

2.3. useMemo để Memoize Values

Tương tự useCallback nhưng dành cho kết quả của một phép tính nặng.

Ví dụ thực tế:

import React, { useMemo } from 'react';

function ExpensiveComponent({ data }) {
  // Giả sử 'data' là một mảng lớn và cần qua phép tính phức tạp
  const processedData = useMemo(() => {
    console.log('Đang tính toán data nặng nề...');
    return data
      .filter(item => item.isActive)
      .map(item => ({ ...item, value: item.price * 1.1 }));
  }, [data]); // Chỉ tính toán lại khi prop 'data' thay đổi

  return (
    <div>
      <h3>Processed Data:</h3>
      <ul>
        {processedData.map(item => (
          <li key={item.id}>{item.name}: {item.value}</li>
        ))}
      </ul>
    </div>
  );
}

export default ExpensiveComponent;
Enter fullscreen mode Exit fullscreen mode

2.4. Virtualization / Windowing

Nếu phải render list có 10,000 item, render thẳng bằng .map() sẽ làm trình duyệt treo ngay. Kỹ thuật Virtualization chỉ render đúng vài chục item đang nằm trong viewport (màn hình hiển thị). Anh em có thể xài thư viện react-window hoặc react-virtualized.

Phần 3: Tối Ưu Cấp Độ Cấu Trúc & State

3.1. Code Splitting và Lazy Loading

Đừng gộp tất cả code vào một file bundle.js. Hãy tách nhỏ ra! React cung cấp React.lazy và Suspense để làm việc này cực dễ:

import React, { Suspense } from 'react';

// Component này chỉ được tải về khi render tới nó
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyPage() {
  return (
    <div>
      <h1>Welcome to My Page</h1>
      <Suspense fallback={<div>Đang tải đồ chơi...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

3.2. Cẩn thận với Context API

Context API sinh ra để tránh Prop-drilling, nhưng nếu Provider re-render, mọi component tiêu thụ Context đó đều re-render theo.
👉 Giải pháp: Chia nhỏ Context ra (ví dụ: ThemeContext riêng, AuthContext riêng) và dùng useMemo cho value truyền vào Provider.

3.3. State Management Libraries

Nếu xài Redux, hãy nhớ dùng reselect để tránh tạo object/array mới trong selector. Nếu không, component nối với store sẽ bị re-render vô tội vạ.

Phần 4: 4 Sai Lầm "Hủy Diệt" Hiệu Suất

Ngay cả Senior đôi khi cũng mắc các lỗi này:

  • Truyền Object/Array inline: <Component data={{ id: 1 }} /> sẽ phá vỡ React.memo vì mỗi lần render, { id: 1 } là một object có tham chiếu hoàn toàn mới.
  • Tính toán nặng trực tiếp trong render: Không bọc useMemo, CPU sẽ khóc thét ở mỗi chu kỳ render.
  • Dùng index làm key cho list: Khi list bị đảo thứ tự hoặc xóa item, React sẽ không track được đúng DOM node, gây lỗi giật lag và sai UI.
  • Fetch dư thừa dữ liệu (Over-fetching): Tải cả cục JSON 5MB trong khi chỉ cần hiện cái tên User.

Phần 5: Khi Nào KHÔNG Nên Tối Ưu?

Donald Knuth từng nói:

"Premature optimization is the root of all evil" (Tối ưu hóa sớm là nguồn gốc của mọi tội lỗi).

Đừng rảnh rỗi đi bọc useMemo và useCallback cho MỌI thứ.

  • Chi phí ngầm: React tốn RAM để lưu cache, tốn CPU để so sánh (shallow compare) dependency. Với component nhỏ, việc render lại từ đầu đôi khi còn nhanh hơn cả việc chạy thuật toán so sánh.
  • Nợ kỹ thuật: Code đầy useMemo rất rối mắt và khó debug.

👉 Nguyên tắc vàng: Code cho chạy đúng trước, chạy nhanh sau. Chỉ tối ưu khi bạn đã dùng Profiler đo đạc và thấy nó thực sự chậm!

FAQ – Hỏi Đáp Nhanh

Q1: Có nên dùng React.memo cho tất cả component không?
Tuyệt đối không. Chỉ dùng cho component con thường xuyên bị re-render oan uổng bởi component cha, và props truyền vào phải là kiểu dữ liệu cơ bản (primitive) hoặc đã được memoize.

Q2: Làm sao để đo lường hiệu suất chính xác nhất?
Dùng extension React DevTools Profiler. Nhấn Record -> Thao tác trên UI -> Nhấn Stop để xem Flamegraph.

Q3: useMemo và useCallback khác gì nhau?

  • useMemo: Cache lại kết quả của một phép tính.
  • useCallback: Cache lại bản thân cái hàm đó, giúp giữ nguyên địa chỉ bộ nhớ (reference) khi truyền xuống component con.

Lời Kết

Tối ưu React không phải là học thuộc lòng các Hook, mà là nghệ thuật cân bằng giữa tài nguyên phần cứng và trải nghiệm người dùng. Những kiến thức về re-render này cũng chính là câu hỏi phỏng vấn kinh điển cho vị trí Frontend Developer đấy!

Chúc anh em code mượt, app nhanh.

💡 Khám phá thêm: Đừng quên ghé thăm ITPrep.com.vn để gom thêm các Cheat Sheet CSS Flexbox, ES6 và kinh nghiệm phỏng vấn thực chiến cho Frontend Developer nhé!

Top comments (0)