ทำไมแอป React ของผมถึงช้าลงเมื่อมีข้อมูล 5,000 รายการ

ผมได้สร้างฟีเจอร์ใน React ที่มี dropdown แบบค้นหาได้และตารางข้อมูล

ทุกอย่างทำงานได้ปกติในช่วงระหว่างการพัฒนา แต่พอผมโหลดข้อมูลจริงจาก production เข้าไป แอปก็เริ่มช้าลง

Dropdown ใช้เวลาหลายวินาทีกว่าจะเปิดขึ้นมา การพิมพ์ในช่องค้นหาก็รู้สึกหน่วง และแอปก็ใช้หน่วยความจำมากเกินไป

ผมต้องจัดการกับข้อมูลผู้ใช้ 5,000 รายการ ซึ่งผมต้องการการค้นหาที่รวดเร็วทันใจและการเลื่อนหน้าจอ (scrolling) ที่ลื่นไหล

และนี่คือวิธีที่ผมแก้ไขมัน

  1. ใช้ useMemo สำหรับการคำนวณ ผมเลิกกรองข้อมูล (filtering) ในทุกๆ การเรนเดอร์ (render) แต่เปลี่ยนมาใช้ useMemo เพื่อเก็บรายการที่กรองแล้วแทน วิธีนี้ช่วยลดภาระการทำงานที่ไม่จำเป็นของ CPU

  2. เพิ่ม Debouncing เมื่อก่อนทุกครั้งที่กดแป้นพิมพ์จะมีการสั่งค้นหา ซึ่งสิ้นเปลืองทรัพยากรมากสำหรับรายการข้อมูลขนาดใหญ่ ผมจึงเพิ่ม debounce 300ms เข้าไป ตอนนี้แอปจะทำการค้นหาก็ต่อเมื่อผู้ใช้หยุดพิมพ์แล้วเท่านั้น

  3. ใช้ Virtualization นี่คือการแก้ไขที่เห็นผลที่สุด แทนที่จะเรนเดอร์ DOM elements ถึง 5,000 ตัว ผมเปลี่ยนมาใช้ react-window แทน ตอนนี้เบราว์เซอร์จะเรนเดอร์เฉพาะแถว 20 หรือ 30 แถวที่ปรากฏบนหน้าจอเท่านั้น ซึ่งช่วยให้การเลื่อนหน้าจอลื่นไหลและลดการใช้หน่วยความจำลง

  4. ป้องกันการ Re-renders ผมใช้ React.memo กับคอมโพเนนต์ในแต่ละแถว และใช้ useCallback สำหรับ event handlers วิธีนี้จะช่วยหยุดไม่ให้คอมโพเนนต์ลูก (child components) อัปเดตหากข้อมูลของพวกมันไม่มีการเปลี่ยนแปลง

  5. ใช้ Server-side Pagination ผมเลิกดึงข้อมูลผู้ใช้ทั้งหมดมาในคราวเดียว แต่เปลี่ยนมาดึงข้อมูลทีละหน้า หน้าละ 50 รายการแทน วิธีนี้ทำให้ API ตอบสนองได้เร็วขึ้นและลดขนาดของข้อมูลที่ต้องส่งมา (data payloads)

  6. ปรับแต่ง Material UI แม้ว่า MUI Autocomplete จะใช้งานได้ดี แต่ก็มีปัญหาเมื่อต้องจัดการกับรายการขนาดใหญ่มาก ผมจึงจำกัดการแสดงผลตัวเลือกไว้เพียง 100 รายการแรกเพื่อให้แอปยังคงทำงานได้รวดเร็ว

ผลลัพธ์ที่ได้:

• ความเร็วของ Dropdown: จาก 5 วินาที เหลือไม่ถึง 500ms • การตอบสนองการค้นหา: จากที่เคยหน่วง กลายเป็นรวดเร็วทันใจ • การใช้หน่วยความจำ: ลดลงอย่างเห็นได้ชัด

ปัญหาด้านประสิทธิภาพมักจะถูกซ่อนไว้ในช่วงระหว่างการพัฒนา แต่มันจะปรากฏออกมาเมื่อผู้ใช้งานจริงเริ่มใช้งานด้วยข้อมูลจริง

เริ่มจากการวัดผลหาจุดที่เป็นคอขวด (bottlenecks) ก่อน แล้วค่อยแก้ไขจุดที่ใหญ่ที่สุดด้วยการใช้ memoization, virtualization และ debouncing

การปรับแต่ง (optimization) แบบไหนที่ช่วยแอป React ของคุณได้มากที่สุด? บอกผมในคอมเมนต์ได้เลยครับ

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