ใช้ useLayoutEffect เพื่อวัดขนาดก่อนเริ่มแอนิเมชัน

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

ผู้ใช้จะเห็นตำแหน่งที่ไม่ถูกต้องเป็นเวลาหนึ่งเฟรม จากนั้นจึงเห็นการแก้ไขอย่างฉับพลัน ซึ่งดูเหมือนการทำงานผิดพลาด

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

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

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

จึงเป็นเครื่องมือที่เหมาะสำหรับการวัดค่าและจัดตำแหน่งที่ต้องแสดงผลได้ถูกต้องทันที

ภายใน useLayoutEffect คุณสามารถอ่านเค้าโครงขององค์ประกอบด้วย ref.current.getBoundingClientRect() เพื่อเก็บตำแหน่งและขนาดก่อนเริ่มแอนิเมชัน

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

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

วิธีนี้ทำให้คุณสร้างแอนิเมชันสำหรับการเปลี่ยนแปลงเค้าโครงได้โดยใช้เพียง transform ที่ประหยัดทรัพยากร แม้ว่าเค้าโครงจริงจะเปลี่ยนตำแหน่งทันที

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

ความแตกต่างระหว่างข้อมูลขอบเขตทั้งสองทำให้คุณได้ค่าการเลื่อนและการปรับขนาดที่แน่นอนสำหรับการกลับด้าน

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

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

บนเซิร์ฟเวอร์ไม่มี DOM ดังนั้น React จึงบันทึกคำเตือนว่า useLayoutEffect ไม่ทำอะไรระหว่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์ เอฟเฟกต์ด้านเค้าโครงใช้ได้ในเบราว์เซอร์เท่านั้น

คำเตือนนี้บ่งบอกว่าเอฟเฟกต์ไม่สามารถทำงานได้ในที่ที่ไม่มีสิ่งใดให้วัดค่า

หากคอมโพเนนต์ต้องทำงานบนเซิร์ฟเวอร์ ให้ใช้ useEffect ร่วมกับ requestAnimationFrame เพื่อวัดค่าก่อนการวาดครั้งถัดไป หรือเลือกใช้ useLayoutEffect เฉพาะในเบราว์เซอร์

วิธีนี้ช่วยหลีกเลี่ยงคำเตือน พร้อมยังได้จังหวะที่ใกล้เคียงกับก่อนการวาดสำหรับแอนิเมชันที่ไม่สำคัญ

แอนิเมชันความสูงเป็นกรณีคลาสสิก ได้แก่ วัดความสูงเมื่อพับและเมื่อขยายใน useLayoutEffect จากนั้นทำแอนิเมชันระหว่างค่าพิกเซลที่กำหนดไว้อย่างชัดเจน เพื่อให้การเปลี่ยนผ่านราบรื่น

เนื่องจากความสูงแบบ auto ไม่สามารถทำแอนิเมชันได้ การวัดความสูงจริงก่อนจึงช่วยให้คุณเปลี่ยนไปยังค่าตัวเลขที่แน่นอนได้

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

การใช้มากเกินไปอาจทำให้ประสิทธิภาพลดลง เพราะจะขัดขวางการวาดจนกว่าจะทำงานเสร็จ

ทดสอบความเข้าใจเกี่ยวกับจังหวะการทำงานของเอฟเฟกต์

คุณได้เรียนรู้ว่าปัญหาการกะพริบเกิดจากการวัดค่าหลังการวาด ว่า useLayoutEffect ทำงานก่อนการวาด และเทคนิค FLIP ใช้แอนิเมชันการเปลี่ยนแปลงเค้าโครงด้วยการแปลงที่ประหยัดทรัพยากรได้อย่างไร

คุณยังได้เห็นคำเตือน SSR และทางเลือกสำรองที่ใช้ useEffect ร่วมกับ requestAnimationFrame