Giải Mã Tối Ưu Hóa React: Từ Bí Kíp Thủ Công Đến Sức Mạnh Tự Động Của React 19!

Lê Lân

22/06/2025

Tối Ưu Hóa Trong React: Tăng Tốc Độ và Cải Thiện Trải Nghiệm Người Dùng

Mở Đầu

Việc tối ưu hóa hiệu suất trong React đóng vai trò quan trọng trong việc nâng cao trải nghiệm người dùng bằng cách giảm thời gian tải và hạn chế những lần render không cần thiết trên DOM.

Trong quá trình phát triển ứng dụng React, các nhà phát triển thường phải thao tác thủ công các kỹ thuật để tăng tốc độ và đảm bảo ứng dụng hoạt động mượt mà. Những kỹ thuật này bao gồm lazy loading, React.memo, cùng các hooks tối ưu hóa như useMemo và useCallback.

Trước khi khám phá tính năng mới của React Compiler (RC) được giới thiệu trong phiên bản React 19, bài viết này sẽ trình bày chi tiết các phương pháp tối ưu hóa truyền thống mà các lập trình viên đã áp dụng để cải thiện hiệu suất ứng dụng.

Các Kỹ Thuật Tối Ưu Trong React

1. Các Hooks Tối Ưu Hiệu Suất

useMemo

Trong JavaScript, các đối tượng và mảng khi truyền vào sẽ được tham chiếu theo địa chỉ (passed by reference). Khi một component React render lại, ngay cả khi nội dung không thay đổi, tham chiếu mới vẫn được tạo ra. Điều này có thể gây ra những render lại không cần thiết.

Hook useMemo được ra đời nhằm giải quyết vấn đề này bằng cách ghi nhớ giá trị đã tính toán và chỉ thay đổi khi các phụ thuộc (dependencies) thay đổi.

Ví dụ:

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

const UserProfile = () => {
  const [username, setUsername] = useState("");
  const [age, setAge] = useState(20);

  // user object được memo hóa, chỉ thay đổi khi username hoặc age thay đổi
  const user = useMemo(() => {
    return {
      name: username,
      age: age,
    };
  }, [username, age]);

  return (
    <div>
      <input
        placeholder="Enter name"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <p>{user.name} is {user.age} years old</p>
    </div>
  );
};

useCallback

Tương tự useMemo, hook useCallback trả về một hàm đã được memo hóa thay vì một giá trị. Điều này rất hữu ích trong việc tránh tạo lại các hàm không cần thiết khi component render lại, từ đó giảm các lần render lại của các component con nhận các hàm đó qua props.

Ví dụ minh họa:

import { useState, useCallback } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  const increment = () => {
    setCount((c) => c + 1);
  };

  const addTodo = useCallback(() => {
    setTodos((t) => [...t, "New Todo"]);
  }, [todos]);

  return (
    <>
      <Todos todos={todos} addTodo={addTodo} />
      <hr />
      <div>
        Count: {count} <button onClick={increment}>+</button>
      </div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// Component Todos
import { memo } from "react";

const Todos = ({ todos, addTodo }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => (
        <p key={index}>{todo}</p>
      ))}
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
};

export default memo(Todos);

Sử dụng useCallback giúp giảm thiểu render lại không cần thiết của component con khi state thay đổi.

2. React.memo

Theo mặc định, khi component cha render lại, các component con cũng sẽ render lại. Việc bọc component con bằng React.memo sẽ khiến React bỏ qua việc render lại component đó nếu props của nó không thay đổi.

Điều này tối ưu hiệu suất đáng kể đặc biệt khi component con có quá trình render phức tạp.

Ví dụ ứng dụng:

Trong ví dụ trên, component Todos được bọc bởi memo để tránh render lại khi state count thay đổi ở component cha App .

3. Kỹ Thuật Lazy Loading

Định nghĩa

Lazy loading là một kỹ thuật giúp chia nhỏ mã nguồn (code splitting) để tải các thành phần, module hoặc tài nguyên một cách bất đồng bộ. Nhờ đó, ứng dụng khởi động nhanh hơn và tải các phần cần thiết khi người dùng yêu cầu.

Cách sử dụng trong React

React cung cấp sẵn phương pháp React.lazy() kết hợp với component Suspense để thực hiện lazy loading.

Ví dụ:

import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<p>....Loading</p>}>
      <h2>Preview</h2>
      <MarkdownPreview />
    </Suspense>
  );
}

Suspense cho phép bạn hiển thị giao diện tải chờ (fallback UI) trong khi component được tải bất đồng bộ.

4. React 19: React Compiler (RC) – Tự Động Tối Ưu

Phiên bản React 19 ra mắt tính năng React Compiler (RC) – một trình biên dịch giúp cải thiện hiệu suất ứng dụng một cách tự động mà không cần các nhà phát triển phải thao tác thủ công.

Tính năng nổi bật

Tự động memo hóa giá trị hoặc nhóm giá trị trong component và hooks dựa trên hiểu biết về JavaScript và quy tắc của React.

Giúp tránh các render thừa không cần thiết do bỏ sót hoặc áp dụng memoization sai cách.

Cải thiện tốc độ và hiệu quả hoạt động của ứng dụng mà không làm tăng sự phức tạp trong mã nguồn.

Theo tài liệu chính thức, React Compiler giúp tối ưu "ngầm", giảm thiểu sai sót do người dùng quên hoặc thực hiện không đúng tối ưu hóa.

Kết Luận

Trong khi React Compiler phiên bản 19 hứa hẹn sẽ tự động hóa quá trình tối ưu hóa, thì việc hiểu rõ các kỹ thuật truyền thống như useMemo, useCallback, React.memo và lazy loading vẫn rất cần thiết cho kỹ thuật viên phát triển ứng dụng React.

Phần lớn các dự án hiện nay vẫn dựa vào các kỹ thuật tối ưu hóa thủ công để đảm bảo hiệu suất ổn định và linh hoạt. Bên cạnh đó, React Compiler vẫn đang trong giai đoạn ổn định, và nhà phát triển cần cảnh giác khi áp dụng vào các dự án sản xuất.

Vậy có nên tối ưu thủ công hay không? Đáp án là có – bởi thực tế các dự án lớn thường cần kiểm soát chi tiết hiệu suất và khả năng tương thích. React Compiler sẽ là bước tiến tiếp theo, nhưng người dùng vẫn cần trang bị kiến thức để chủ động tối ưu hóa.

Tham Khảo

React Official Documentation - Performance Optimization: reactjs.org/docs/optimizing-performance.html

Introducing React 19 Compiler – Meta Engineering Blog, 2024

W3Schools - React useCallback Hook: w3schools.com/react/react_usecallback.asp

React Lazy Loading – Code Splitting: reactjs.org/docs/code-splitting.html

Dan Abramov – React Memoization Patterns: overreacted.io/memoization-in-react

June 15, 2024