[React Basics] Cách sử dụng Profiler trong React DevTools để tối ưu hiệu năng

Trong thế giới phát triển ứng dụng web hiện đại, hiệu năng là yếu-tố-sống-còn. Một ứng dụng React mượt mà, phản hồi nhanh chóng sẽ mang lại trải nghiệm tuyệt vời cho người dùng, ngược lại, sự chậm chạp, giật lag có thể khiến họ rời đi mãi mãi. Để giúp các nhà phát triển "bắt bệnh" và tối ưu hóa hiệu năng ứng dụng, bộ công cụ React DevTools đã trang bị một "vũ khí" cực kỳ mạnh mẽ: Profiler.

Bài viết này sẽ giúp bạn từ một người mới trở thành chuyên gia sử dụng Profiler, qua đó dễ dàng xác định và giải quyết các "nút cổ chai" hiệu năng trong ứng dụng React của mình.

React Profiler là gì? Tại sao bạn nên quan tâm?

React Profiler là một công cụ tích hợp trong React DevTools, cho phép bạn ghi lại và phân tích thông tin về hiệu suất render của các component trong ứng dụng. Nó giúp trả lời những câu hỏi quan trọng như:

• Component nào đang render lại không cần thiết?
• Việc render một component cụ thể mất bao nhiêu thời gian?
• Điều gì đã kích hoạt một lần render?
• Liệu việc áp dụng các kỹ thuật tối ưu hóa như memo có thực sự hiệu quả?

Bằng cách cung cấp những thông tin chi tiết này, Profiler giúp bạn đưa ra quyết định tối ưu hóa một cách chính xác, thay vì phỏng đoán mò mẫm.

Bắt đầu với Profiler: Ghi lại phiên phân tích đầu tiên

Để bắt đầu, bạn cần cài đặt extension React Developer Tools cho trình duyệt của mình (hỗ trợ Chrome, Firefox và Edge). Sau khi cài đặt, hãy mở Developer Tools (thường bằng phím F12) và bạn sẽ thấy hai tab mới: ⚛️ Components và ⚛️ Profiler.

Hãy thực hiện các bước sau để ghi lại một phiên profiling:

1. Chuyển sang tab "⚛️ Profiler" trong Developer Tools.
2. Nhấn vào nút ghi hình tròn màu xanh lam (Start profiling) ở góc trên cùng bên trái.
3. Tương tác với ứng dụng của bạn. Hãy thực hiện các hành động mà bạn nghi ngờ gây ra vấn đề về hiệu năng, ví dụ như nhập liệu vào form, nhấn nút, lọc danh sách, v.v. React DevTools sẽ thu thập dữ liệu trong quá trình này.
4. Nhấn lại vào nút ghi màu đỏ (Stop profiling) để dừng việc ghi lại.

Sau khi dừng, Profiler sẽ hiển thị dữ liệu hiệu suất mà nó đã thu thập, sẵn sàng để bạn phân tích.

Tìm hiểu giao diện Profiler: Flamegraph và Ranked Chart

Dữ liệu profiling được trình bày qua nhiều dạng biểu đồ, trong đó hai loại quan trọng nhất là Flamegraph và Ranked chart.

1. Biểu đồ ngọn lửa (Flamegraph)

Đây là chế độ xem mặc định, cung cấp cái nhìn tổng quan về cây component của bạn tại một thời điểm render cụ thể (một "commit").

• Trục hoành (Chiều rộng): Mỗi thanh trong biểu đồ đại diện cho một component. Chiều rộng của thanh cho biết component đó và các con của nó mất bao lâu để render. Thanh càng rộng, thời gian render càng lâu.
• Trục tung (Thứ tự): Biểu đồ thể hiện cấu trúc phân cấp của các component. Component cha sẽ nằm bên trên và chứa các component con của nó.
• Màu sắc: Màu sắc của các thanh cũng mang ý nghĩa. Các thanh màu ấm (vàng, cam) biểu thị các component mất nhiều thời gian render hơn, trong khi các màu lạnh (xanh lam, xanh lục) cho thấy thời gian render nhanh hơn. Các thanh màu xám có nghĩa là component đó không hề render trong lần commit này.

Khi nhấp vào một component trên biểu đồ, bạn có thể xem thông tin chi tiết ở khung bên phải, bao gồm thời gian render và lý do tại sao nó render lại. Đây là manh mối cực kỳ quan trọng để tìm ra những lần re-render không cần thiết.

2. Biểu đồ xếp hạng (Ranked Chart)

Nếu bạn muốn biết chính xác component nào mất nhiều thời gian render nhất trong một commit, hãy chuyển sang chế độ xem "Ranked".

Chế độ xem này hiển thị một danh sách các component được sắp xếp theo thứ tự giảm dần về thời gian render. Component render lâu nhất sẽ nằm ở trên cùng. Điều này giúp bạn nhanh chóng xác định "thủ phạm" gây chậm chạp mà không cần phải duyệt qua toàn bộ cây component như trong Flamegraph.

"Bắt bệnh" hiệu năng: Các kịch bản thường gặp và cách giải quyết

Bây giờ bạn đã hiểu cách đọc dữ liệu, hãy áp dụng nó vào việc tìm và sửa các vấn đề hiệu năng phổ biến.

Kịch bản 1: Re-render không cần thiết

Đây là vấn đề phổ biến nhất. Một component bị render lại mặc dù props và state của nó không hề thay đổi.

• Dấu hiệu: Trong Flamegraph, bạn thấy một component có màu (không phải màu xám) nhưng khi kiểm tra ở khung bên phải, phần "Why did this render?" không cho thấy sự thay đổi nào ở props hoặc state.
• Giải pháp: Sử dụng React.memo để bọc component đó lại. React.memo sẽ thực hiện một phép so sánh nông (shallow comparison) trên props và chỉ render lại component nếu props thay đổi.

Ví dụ:

// Trước khi tối ưu
const UserProfile = ({ user }) => {
  console.log('UserProfile rendered')
  return <div>{user.name}</div>
}

// Sau khi tối ưu
import { memo } from 'react'

const UserProfile = memo(({ user }) => {
  console.log('UserProfile rendered')
  return <div>{user.name}</div>
})

Kịch bản 2: Tính toán phức tạp trong hàm render

Một component có thể thực hiện các phép tính toán hoặc xử lý dữ liệu nặng nề ngay trong thân hàm. Mỗi lần render, phép tính này lại được thực hiện lại.

• Dấu hiệu: Trong Ranked chart, một component luôn chiếm vị trí cao về thời gian render. Nhìn vào mã nguồn của nó, bạn thấy các vòng lặp phức tạp hoặc các hàm xử lý dữ liệu lớn.
• Giải pháp: Sử dụng hook useMemo để ghi nhớ (memoize) kết quả của các phép tính toán tốn kém. useMemo sẽ chỉ tính toán lại giá trị khi một trong các phụ thuộc (dependencies) của nó thay đổi.

Ví dụ:

// Trước khi tối ưu
const TodoList = ({ todos }) => {
  const visibleTodos = filterTodos(todos, 'all') // Hàm này tốn kém
  return <ul>...</ul>
}

// Sau khi tối ưu
import { useMemo } from 'react'

const TodoList = ({ todos }) => {
  const visibleTodos = useMemo(() => filterTodos(todos, 'all'), [todos])
  return <ul>...</ul>
}

Lời khuyên khi sử dụng Profiler

Cuối cùng, dưới đây là 3 lời khuyên ngắn gọn nhưng hữu ích:

• Profile trên bản production: Luôn ưu tiên phân tích hiệu năng trên bản build production (npm run build). Dữ liệu ở môi trường development có thể không phản ánh chính xác hiệu suất thực tế của ứng dụng.
• Tập trung vào các tương tác của người dùng: Đừng profiling một cách vu vơ. Hãy tập trung vào những luồng tương tác quan trọng hoặc những khu vực mà người dùng cảm thấy chậm.
• Đừng tối ưu hóa sớm: Chỉ tối ưu hóa khi bạn đã xác định được vấn đề thực sự thông qua Profiler. Tối ưu hóa quá sớm có thể làm phức tạp hóa mã nguồn một cách không cần thiết.

Việc làm chủ React Profiler không chỉ giúp bạn xây dựng những ứng dụng nhanh hơn mà còn mang lại sự hiểu biết sâu sắc hơn về cách React hoạt động. Hãy biến nó thành một công cụ không thể thiếu trong quy trình làm việc của bạn để tạo ra những sản phẩm web chất lượng và hiệu suất cao.

Chúc bạn viết code vui vẻ với React!