Tại sao ứng dụng React của tôi trở nên chậm khi có 5.000 bản ghi

Tôi đã xây dựng một tính năng React với menu thả xuống có thể tìm kiếm và một bảng dữ liệu.

Mọi thứ đều hoạt động tốt trong quá trình phát triển. Sau đó, tôi tải dữ liệu thực tế từ môi trường production. Ứng dụng bắt đầu trở nên chậm chạp.

Menu thả xuống mất vài giây mới mở được. Việc nhập liệu vào ô tìm kiếm có cảm giác bị giật lag. Ứng dụng tiêu tốn quá nhiều bộ nhớ.

Tôi phải xử lý 5.000 bản ghi người dùng. Tôi cần tính năng tìm kiếm tức thì và cuộn mượt mà.

Dưới đây là cách tôi đã khắc phục.

  1. Sử dụng useMemo để tính toán Tôi đã ngừng việc lọc dữ liệu sau mỗi lần render. Tôi sử dụng useMemo để lưu trữ danh sách đã được lọc. Điều này giúp ngăn chặn các tác vụ không cần thiết cho CPU.

  2. Thêm Debouncing Trước đây, mỗi phím bấm đều kích hoạt một lượt tìm kiếm. Điều này rất tốn kém đối với các danh sách lớn. Tôi đã thêm một khoảng debounce 300ms. Giờ đây, ứng dụng chỉ thực hiện tìm kiếm sau khi người dùng ngừng gõ.

  3. Triển khai Virtualization Đây là giải pháp quan trọng nhất. Thay vì render 5.000 phần tử DOM, tôi đã sử dụng react-window. Trình duyệt giờ đây chỉ render 20 hoặc 30 hàng đang hiển thị trên màn hình. Điều này giúp việc cuộn trở nên mượt mà và giảm mức sử dụng bộ nhớ.

  4. Ngăn chặn Re-renders Tôi đã sử dụng React.memo cho các component hàng. Tôi cũng sử dụng useCallback cho các trình xử lý sự kiện. Điều này ngăn các component con cập nhật khi dữ liệu của chúng không thay đổi.

  5. Sử dụng Server-side Pagination Tôi đã ngừng việc lấy toàn bộ người dùng cùng một lúc. Tôi chuyển sang lấy các trang nhỏ, mỗi trang 50 bản ghi. Điều này giúp phản hồi API nhanh hơn và giảm dung lượng dữ liệu truyền tải.

  6. Tối ưu hóa Material UI MUI Autocomplete rất tuyệt vời, nhưng nó gặp khó khăn với các danh sách khổng lồ. Tôi đã giới hạn các tùy chọn hiển thị trong 100 kết quả đầu tiên để giữ cho tốc độ nhanh chóng.

Kết quả:

• Tốc độ menu thả xuống: Từ 5 giây xuống dưới 500ms. • Phản hồi tìm kiếm: Từ giật lag sang tức thì. • Sử dụng bộ nhớ: Giảm đáng kể.

Các vấn đề về hiệu suất thường ẩn mình trong quá trình phát triển. Chúng chỉ xuất hiện khi dữ liệu thực tế tiếp cận người dùng của bạn.

Hãy đo lường các điểm nghẽn trước. Giải quyết những điểm lớn nhất bằng memoization, virtualization và debouncing.

Giải pháp tối ưu hóa nào đã giúp ích nhiều nhất cho ứng dụng React của bạn? Hãy cho tôi biết trong phần bình luận.

Nguồn: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9