Cách đo và tối ưu hiệu năng React

[Lướt Web]

React dễ chùng xuống khi ứng dụng lớn dần: render thừa, bundle phình to và tương tác giật lag. Bài viết hướng dẫn cách đo hiệu năng bằng công cụ của trình duyệt và React, rồi đưa ra các kỹ thuật tối ưu thiết thực.

Vấn đề hiệu năng thường gặp trong React​

React app lớn thường gặp các triệu chứng: component render không cần thiết, bundle bị phình, các tương tác người dùng bị trễ dẫn đến điểm Core Web Vitals kém (đặc biệt là INP). Trước khi tối ưu, phải biết chính xác đâu là nút cổ chai bằng cách đo và ghi lại dữ liệu thực tế.

Các công cụ đo trong Chrome DevTools và React​

React Performance Tracks (từ React 19.2) hiển thị các sự kiện React trong tab Performance của Chrome DevTools, giúp bạn nhìn thấy hệ thống ưu tiên nội bộ của React, độ dài render của component và hoạt động server-side.

Ba luồng chính trong Performance Tracks​

• Scheduler track: hiển thị lịch trình công việc nội bộ (Blocking, Transition, Suspense, Idle) để biết React đang xử lý hay chờ.
• Components track: biểu diễn cây component dạng flame chart, giúp phát hiện component render lâu hoặc render nhiều lần.
• Server tracks: cho thấy hoạt động Server Components và request server trong môi trường phát triển (hữu ích khi dùng SSR/Server Components).

Trong tab Performance, nhấn Record, tương tác với app rồi dừng để xem timeline cùng các track này.

React Developer Tools — Profiler​

React Developer Tools thêm tab Components và Profiler vào DevTools. Profiler ghi lại các commit, hiển thị flame chart theo thứ bậc và độ dài render của từng component.

Bạn có thể bật tuỳ chọn "Record why each component rendered" trong Profiler để biết lý do một component render — props thay đổi, state thay đổi, hay do parent render — giúp loại bỏ đoán mò khi debug render thừa.

Profiler component và onRender​

React cung cấp component

Profiler

để đo chương trình phần nào của cây component. Hàm callback onRender sẽ được gọi mỗi khi phần đó render, cung cấp dữ liệu thời gian và phase để bạn log hoặc phân tích về sau.

Chrome DevTools: Main thread và Call Tree​

Tab Performance của Chrome còn cho thấy main thread timeline và call tree, giúp bạn phân tích chức năng JavaScript nào tốn CPU nhất — bao gồm cả mã React và logic ứng dụng. Dùng Call Tree để phân biệt self time và total time của hàm.

Real user monitoring (RUM) và Core Web Vitals​

RUM cung cấp góc nhìn tổng quan về Core Web Vitals thực tế: thời gian tải, độ ổn định hình ảnh, và phản hồi tương tác. Dữ liệu RUM giúp ưu tiên tối ưu dựa trên trải nghiệm người dùng thật sự (ví dụ cải thiện INP, giảm long tasks).

Kỹ thuật tối ưu khi đã xác định được nút cổ chai​

• Memoization: tránh tính toán và render thừa bằng cách dùng React.memo cho component, useMemo cho giá trị phức tạp và useCallback cho hàm được truyền xuống props.
• Tránh truyền object/hàm tạo mới trong JSX mỗi lần render (sử dụng useMemo/useCallback để giữ tham chiếu ổn định).
• Phân mảnh cây component: tách component nặng ra để giảm vùng cần render khi có thay đổi.
• Code-splitting và lazy loading: chỉ tải mã khi cần, giảm bundle khởi tạo.
• Sử dụng virtualization cho danh sách dài (react-window, react-virtualized) để giảm số DOM node render cùng lúc.
• Giảm công việc trên main thread: chuyển tác vụ nặng sang Web Worker, tránh long tasks gây giật tương tác.
• Tối ưu bundle: loại bỏ dependency không cần thiết, bật tree-shaking, dùng bundle analyzer để tìm thành phần lớn.
• Tận dụng Suspense và streaming (khi dùng Server Components/SSR) để cải thiện thời gian hiển thị ban đầu và trải nghiệm tương tác.

Quy trình tối ưu hiệu quả​

• Đo trước: dùng Profiler, Performance Tracks và RUM để xác định vấn đề có tác động đến người dùng thực sự.
• Ưu tiên: tập trung vào những điểm ảnh hưởng đến Core Web Vitals và các long tasks gây giật.
• Tối ưu theo bước: áp dụng memoization, tách component, giảm bundle, rồi kiểm tra lại bằng profiling.
• Giám sát liên tục: triển khai RUM để phát hiện suy giảm hiệu năng sau thay đổi hoặc khi lưu lượng tăng.

Kết luận: đo đúng chỗ, tối ưu đúng việc sẽ cải thiện trải nghiệm người dùng rõ rệt. Bắt đầu bằng profiling có hệ thống, rồi áp dụng các kỹ thuật như memoization, tách component và giảm tải main thread để đạt hiệu năng tốt hơn.

Nguồn: https://www.debugbear.com/blog/measuring-react-app-performance