Bạn đã bao giờ gặp khó khăn trong việc kiểm soát đoạn mã của mình để tránh re-render giao diện lại một cách liên tục ?
Đã không ít lần bạn phải đau đầu tìm cho mình những lỗi sai ngớ ngẩn hoặc bất lực trong việc tìm lỗi chưa ?
Vậy thì bài viết ngày hôm nay tôi sẽ giới thiệu cho bạn một công cụ kiểm tra và gỡ lỗi vô cùng hiệu quả, giúp bạn tối ưu hoá hiệu suất cho trang web của mình mà không gặp nhiều khó khăn trong việc cài đặt và sử dụng.
Đó chính là react-scan
Bài viết sẽ bao gồm những nội dung chính bao gồm:
- React Scan là gì ?
- Lợi ích gì khi sử dụng react-scan ?
- React Scan hoạt động như nào ?
- Áp dụng react-scan vào bài toán thực tế
Đầu tiên hãy cùng tìm hiểu
React-Scan là gì ?
Hãy nói lời tạm biệt với việc trang web của bạn bị render chậm bắt đầu từ giây phút này. React-Scan là một công cụ "giám sát" và "chuẩn đoán" dành cho react. Chúng được thiết kế nhằm mục đích phân tích các vấn đề về hiệu suất và xác định các lần render không cần thiết. Việc ghi lại thông tin chi tiết về các chu kỳ render và tạo bản báo cáo có thể giúp bạn giải quyết vấn đề một cách hiệu quả.
Lợi ích là gì ?
Việc phải ngồi hàng giờ console.log("re-render") chắc hẳn đã từng làm cho rất nhiều ae dev phải đau đầu mất ngủ. Vì thế có thể thấy ngay react-scan sẽ giúp ae tiết kiệm công sức của mình đi rất nhiều trong những lần fix-bug.
Cùng với đó, thay vì đoán và kiểm tra bug từng trang thì giờ đây ae không cần phải mất công như vậy. React-scan được tích hợp sẵn trên dự án và tự động thông báo trực tiếp lên trên giao diện cho anh em thấy những component nào đang có hiệu suất kém và cần cải thiện.
Ngoài ra react-scan còn mô tả chi tiết cấu trúc component dù cho có cồng kềnh đến đâu, giúp cho lập trình viên không cần phải mất thời gian quá nhiều để mò mẫm, giúp cho họ biết được chỗ nào cần callback, chỗ nào cần memo.
React-scan hoạt động như nào ?
Việc cài đặt thêm một công cụ vào project của mình nhằm nâng cao chất lượng code là tốt. Tuy nhiên chúng ta cùng cần phải nắm được rõ cách thức hoạt động của chúng như nào để đảm bảo tính bảo mật cho dự án.
React-Scan hoạt động bằng cách "quét" ứng dụng React của bạn và ghi lại các chu kỳ render của từng thành phần. Dựa trên các thông số hiệu suất, nó sẽ:
- Xác định các thành phần bị ảnh hưởng. Những thành phần nào đang render quá thường xuyên hoặc không cần thiết sẽ được làm nổi bật.
- Hiển thị trực quan. Bạn sẽ thấy trực tiếp các thành phần "có vấn đề" được đánh dấu trong giao diện người dùng.
- Gợi ý cải thiện. Dựa trên thông tin thu thập được, bạn có thể xác định được khi nào cần tối ưu bằng các công cụ như React.memo, useCallback, hoặc các kỹ thuật quản lý state hiệu quả hơn.
Áp dụng react-scan vào bài toán thực tế
Ok, giới thiệu công cụ xịn là vậy nhưng ví dụ thực tế cần phải hiệu quả thì mới đáng dùng. Cùng đi vào ví dụ một với một dự án thực tế của tôi.
Ứng dụng này sử dụng Next.js để tạo ra một trang web tương tác với các tính năng chính:
- Thay đổi giao diện (theme): Người dùng có thể nhập các giá trị như "blue", "green", "dark" để thay đổi giao diện.
- Nút tăng số đếm: Khi bấm vào nút, số đếm được cập nhật ngay lập tức.
- Phát hiện sự kiện nhấn vào vùng chính: Khi người dùng nhấn vào khu vực nội dung, hệ thống sẽ hiển thị thông báo tương tác.
- Tương tác với footer: Khi nhấn vào footer, một dòng thông báo sẽ xuất hiện.
Và bạn có thể thấy react scan hoạt động như ở trên hình. Tôi đã bật chức năng giám sát cho Footer và bạn có thể thấy tôi đã cố tình code lỗi để mỗi lần nhập vào input thì toàn bộ giao diện sẽ bị re-render lại và Footer cũng vậy.
Theo nguyên tắc Footer là một component tĩnh và nó phải được memo để tránh các lần re-render không cần thiết như vậy.
Tiếp theo hãy đến với một ví dụ khác:
Ở ví dụ này tôi sẽ setup để react scan có thể ghi chép lại các thao tác của người dùng trên trang web cùng các số liệu để admin có thể phân tích hiệu năng thao tác.
Đầu tiên hãy đăng nhập vào trang web https://dashboard.react-scan.com/login
Tiếp theo đó tạo một project
Sau đó làm theo các bước hướng dẫn để tích hợp React Scan Monitoring vào dự án của mình.
Sau đó quay trở lại trang web và thao tác khiến trang web re-render lại nhiều lần.
Truy cập lại trang dashboard monitor bạn sẽ thấy log của thao tác:
Click chọn một thao tác và ta có bảng phân tích như sau:
Như vậy qua hai ví dụ chúng ta có thể thấy react-scan có thể tích hợp và sử dụng dễ dàng một cách hiệu quả trong project của chúng ta.
Mong rằng bài viết của tôi sẽ giúp các bạn biết thêm được một công cụ mới mạnh mẽ trong việc tối ưu hoá cho trang web của mình. Chúc các bạn cài đặt và sử dụng thành công.
Top comments (0)