React Scan - Công cụ quét ứng dụng React để tự động tìm ra vấn đề hiệu năng

• Không giống các công cụ hiện có (Profiler, Why Did You Render?, React Devtools), gần như không cần thay đổi mã và cung cấp các tín hiệu trực quan đơn giản cùng API có thể lập trình
• Tự động phát hiện và làm nổi bật các lần render gây ra vấn đề hiệu năng, đồng thời cho biết chính xác thành phần nào cần chỉnh sửa
• Vì chỉ là Javascript đơn giản, có thể chèn vào bất cứ đâu: thẻ script, NPM, v.v.

Vì sao cần React Scan

• Việc tối ưu hóa React có thể khá phức tạp
• Một chủ ý thiết kế là props của component được so sánh theo tham chiếu thay vì theo giá trị. Cách này giúp giảm chi phí thực thi render
• Tuy nhiên, điều đó cũng khiến các lần render không cần thiết dễ vô tình xảy ra hơn, làm ứng dụng chậm đi
• Ngay cả trong các ứng dụng production quy mô lớn với hàng trăm lập trình viên, việc tối ưu hóa thường vẫn rất khó (ví dụ GitHub, Twitter, Instagram).

React Scan tốt hơn React Devtools ở điểm nào

• Giới hạn của React Devtools:
  • Được thiết kế như một công cụ đa dụng nên không thể phân biệt rõ ràng giữa render không cần thiết và render cần thiết.
  • Không có API có thể lập trình, nên khó tự động hóa việc gỡ lỗi hiệu năng.
• Một số bất tiện cá nhân với tính năng highlight của React Devtools:
  • Độ trễ phát hiện render: React Devtools xử lý render theo lô, nên các component render rất nhanh chỉ được hiển thị một lần mỗi giây.
  • Vấn đề cập nhật vị trí khung: Khi cuộn hoặc thay đổi kích thước, vị trí khung không được cập nhật.
  • Thiếu hiển thị số lần render: Không cho thấy số lần render của từng component.
  • Khó phân biệt render có vấn đề: Muốn kiểm tra render chậm hoặc kém hiệu quả thì phải tự kiểm tra component.
  • Thiếu trải nghiệm người dùng: Menu bị ẩn nên việc bật tắt tính năng khá bất tiện. UI không được thiết kế phù hợp cho việc gỡ lỗi hiệu năng.
  • Không có API cho chương trình: Không thể dùng để tự động hóa debug hoặc cho các tác vụ nâng cao.
  • Bị giới hạn trong tiện ích mở rộng Chrome: Không thể dùng ở mọi nơi trên web và phụ thuộc vào extension của trình duyệt.
  • Vấn đề thiết kế mang tính chủ quan: Đường viền khung mờ và tạo cảm giác hoạt động chậm.
• Điểm khác biệt của React Scan:
  • Là công cụ chuyên dụng được thiết kế cho việc gỡ lỗi hiệu năng, giúp xác định rõ các render không cần thiết.
  • Có thể dùng trên mọi nền tảng (web, script, npm) và tối ưu trải nghiệm lập trình viên.
  • Với lộ trình tính năng đầy tham vọng, công cụ này mở ra khả năng vượt xa React Devtools.

[plenty]

Dễ xem nên rất tốt.

[carnoxen]

Một trường hợp sử dụng rất phù hợp

[kandk]

Có thể vì bản demo là một ứng dụng nhỏ, nhưng tốc độ phản hồi khá nhanh.