𝗦𝘁𝗼𝗽 𝗕𝗹𝗼𝗰𝗸𝗶𝗻𝗴 𝗧𝗵𝗲 𝗨𝗜: 𝗜𝗻𝘁𝗲𝗿𝗿𝘂𝗽𝘁𝗶𝗯𝗹𝗲 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 𝗜𝗻 𝗥𝗲𝗮𝗰𝘁

𝗦𝘁𝗼𝗽 𝗕𝗹𝗼𝗰𝗸𝗶𝗻𝗴 𝗧𝗵𝗲 𝗨𝗜: 𝗜𝗻𝘁𝗲𝗿𝗿𝘂𝗽𝘁𝗶𝗯𝗹𝗲 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 𝗜𝗻 𝗥𝗲𝗮𝗰𝘁

การเรนเดอร์ของ React สามารถทำให้ User Interface (UI) ของคุณค้างได้

การคำนวณที่หนักหน่วงจะบล็อก Main Thread ทำให้ผู้ใช้เห็นหน้าจอค้าง ซึ่งจะทำลายประสบการณ์การใช้งาน

Interruptible rendering ช่วยแก้ปัญหานี้ โดยช่วยให้ React สามารถหยุดพักงานชั่วคราวเพื่อไปจัดการกับการตอบสนอง (input) ของผู้ใช้ได้

หลักการทำงาน:

• React แบ่งงานออกเป็นส่วนย่อยๆ
• มันจะคอยตรวจสอบงานที่มีความสำคัญสูง เช่น การคลิกหรือการพิมพ์
• หากผู้ใช้มีการโต้ตอบ React จะหยุดงานที่ทำอยู่เบื้องหลังไว้ก่อน
• React จะจัดการกับ input นั้นก่อน
• React จึงค่อยกลับมาทำงานเบื้องหลังต่อในภายหลัง

คุณสามารถใช้ transitions ในการจัดการเรื่องนี้ โดยใช้ useTransition เพื่อระบุการอัปเดตที่ไม่เร่งด่วน ซึ่งจะเป็นการบอกให้ React รักษาความลื่นไหล (responsive) ของ UI เอาไว้

อย่าปล่อยให้การประมวลผลข้อมูลที่หนักหน่วงมาทำลายประสิทธิภาพของแอปคุณ

ที่มา: https://dev.to/iprajapatiparesh/stop-blocking-the-ui-interruptible-rendering-in-react-32mb