useLayoutEffect ทำงานเมื่อใดเทียบกับ useEffect

useLayoutEffect ทำงานแบบซิงโครนัสทันทีหลังจาก React ใช้การเปลี่ยนแปลงกับ DOM แล้ว แต่ก่อนที่เบราว์เซอร์จะมีโอกาสวาดการเปลี่ยนแปลงเหล่านั้น จากมุมมองของเบราว์เซอร์ เอฟเฟกต์การจัดวางและการเปลี่ยนแปลง DOM เป็นส่วนหนึ่งของบล็อกงานแบบซิงโครนัสต่อเนื่องเดียวกัน

useEffect ทำงานแบบอะซิงโครนัสหลังจากเบราว์เซอร์วาดหน้าจอเสร็จแล้ว ผู้ใช้จะเห็นส่วนติดต่อผู้ใช้ที่อัปเดตก่อน จากนั้นเอฟเฟกต์จึงทำงาน ทำให้ useEffect รบกวนประสิทธิภาพการเรนเดอร์น้อยกว่า แต่หมายความว่าการเปลี่ยนแปลงที่มองเห็นได้ซึ่งเกิดจากเอฟเฟกต์จะทำให้เกิดรอบการวาดหน้าจอครั้งที่สอง

คุณสามารถตรวจสอบความแตกต่างของจังหวะเวลาได้โดยบันทึกค่าประทับเวลาในเอฟเฟกต์ทั้งสอง: เพิ่ม console.log('layout', Date.now()) ใน useLayoutEffect และ console.log('passive', Date.now()) ใน useEffect ในคอนโซล ค่าประทับเวลาของเอฟเฟกต์การจัดวางจะเร็วกว่าค่าประทับเวลาของเอฟเฟกต์แบบไม่เร่งด่วนเสมอ ซึ่งยืนยันลำดับการทำงาน

หาก useEffect อัปเดตสถานะที่ส่งผลต่อผลลัพธ์ทางภาพ ผู้ใช้จะเห็นการเรนเดอร์สองครั้ง ได้แก่ การเรนเดอร์ครั้งแรกด้วยสถานะเก่า แล้วจึงเป็นการเรนเดอร์ที่แก้ไขแล้วหลังจากเอฟเฟกต์ทำงาน สิ่งนี้ปรากฏเป็นการกะพริบหรือการจัดวางใหม่ที่มองเห็นได้ useLayoutEffect ป้องกันปัญหานี้ได้ เพราะการอัปเดตสถานะของมันจะถูกคอมมิตก่อนที่เบราว์เซอร์จะวาดสิ่งใด

หากคุณเรียกใช้ setState ภายใน useLayoutEffect React จะทำงานเรนเดอร์และคอมมิตรอบใหม่ทันที ก่อนวาดหน้าจอ เบราว์เซอร์จะวาดเฉพาะผลลัพธ์สุดท้ายเท่านั้น ผู้ใช้จึงไม่เห็นสถานะระหว่างทาง กรณีใช้งานหลักของ useLayoutEffect คือการวัด DOM คำนวณค่าใหม่ ตั้งสถานะ และรับประกันการวาดหน้าจอที่เรียบร้อยเพียงครั้งเดียว

เนื่องจาก useLayoutEffect ทำงานแบบซิงโครนัสก่อนวาดหน้าจอและอาจทำให้เกิดการเรนเดอร์เพิ่มเติม การใช้มากเกินไปจึงอาจทำให้ประสิทธิภาพแย่ลง หากงานแบบซิงโครนัสใช้เวลามาก งานนั้นจะขัดขวางไม่ให้เบราว์เซอร์วาดหน้าจอ ทำให้เกิดอาการกระตุกที่มองเห็นได้ ใช้สิ่งนี้เฉพาะเมื่อต้องป้องกันการกะพริบทางภาพเท่านั้น ส่วนกรณีอื่นให้ใช้ useEffect

ในโหมดเข้มงวดของ React (เฉพาะระหว่างการพัฒนา) ทั้ง useLayoutEffect และ useEffect จะถูกเรียกใช้สองครั้งต่อการเมานต์หนึ่งครั้ง ลำดับคือ เมานต์ ล้างข้อมูล แล้วเมานต์อีกครั้ง วิธีนี้ช่วยตรวจจับเอฟเฟกต์ที่ล้างข้อมูลไม่ถูกต้อง การเรียกใช้ซ้ำสองครั้งจะไม่เกิดขึ้นในรุ่นที่ใช้งานจริง

ตัวเลือกเริ่มต้นควรเป็น useEffect เสมอ เปลี่ยนไปใช้ useLayoutEffect เฉพาะเมื่อคุณสังเกตเห็นและทำให้เกิดปัญหาการกะพริบทางภาพหรือการจัดวางไม่ถูกต้องซ้ำได้ การใช้ useLayoutEffect มากเกินไปจะขัดขวางกระบวนการวาดหน้าจอของเบราว์เซอร์โดยไม่จำเป็น และอาจทำให้ประสิทธิภาพที่ผู้ใช้รับรู้แย่ลง

useLayoutEffect ทำงานบนเซิร์ฟเวอร์ไม่ได้ เพราะในสภาพแวดล้อมเซิร์ฟเวอร์ไม่มี DOM หรือรอบการวาดหน้าจอของเบราว์เซอร์ หากใช้ในคอมโพเนนต์ที่เรนเดอร์บนเซิร์ฟเวอร์ React จะแสดงคำเตือน วิธีแก้คือข้ามเอฟเฟกต์ตามเงื่อนไข โดยตรวจสอบ typeof window !== 'undefined' หรือเปลี่ยนไปใช้ useEffect สำหรับโค้ดที่รองรับ SSR

ลองถามตัวเองว่า "เอฟเฟกต์นี้เปลี่ยนแปลงสิ่งที่ผู้ใช้จะมองเห็นตั้งแต่การวาดหน้าจอครั้งแรกหรือไม่" หากใช่ ให้ใช้ useLayoutEffect เพื่อป้องกันการกะพริบ หากไม่ใช่ เช่น การดึงข้อมูล การสมัครรับข้อมูล การวิเคราะห์ข้อมูล การบันทึกข้อมูล และผลข้างเคียงอื่น ๆ ส่วนใหญ่ ให้ใช้ useEffect กรอบการตัดสินใจนี้ครอบคลุมกรณีส่วนใหญ่ที่พบในโลกจริง

useLayoutEffect ทำงานในบล็อกแบบซิงโครนัสเดียวกับการเปลี่ยนแปลง DOM React ไม่สามารถประมวลผลงานอื่น เช่น การตอบสนองต่อเหตุการณ์ของผู้ใช้ ขณะที่ useLayoutEffect กำลังทำงานอยู่ได้ นี่คือเหตุผลที่เอฟเฟกต์นี้ต้องทำงานรวดเร็วและตรงประเด็น โค้ดแบบซิงโครนัสที่ทำงานนานภายใน useLayoutEffect จะทำให้เบราว์เซอร์แสดงผลบนหน้าจอล่าช้าโดยตรง

useLayoutEffect ทำงานเมื่อใดอย่างแน่นอนเมื่อเทียบกับการเปลี่ยนแปลง DOM และการวาดหน้าจอของเบราว์เซอร์

useLayoutEffect ทำงานแบบซิงโครนัสและทำงานก่อนการวาดหน้าจอของเบราว์เซอร์ จึงเหมาะสำหรับการวัด DOM และแก้ไขการแสดงผลทางภาพ ส่วน useEffect ทำงานหลังการวาดหน้าจอ และเป็นตัวเลือกที่เหมาะสมสำหรับการดึงข้อมูล การสมัครรับข้อมูล และผลข้างเคียงส่วนใหญ่ ให้ใช้ useEffect เป็นค่าเริ่มต้น และเปลี่ยนไปใช้เฉพาะเมื่อการกะพริบทางภาพยืนยันว่าจำเป็นต้องใช้ useLayoutEffect หลีกเลี่ยงการใช้ใน SSR หากไม่มีการตรวจสอบป้องกัน