useEffect vs useLayoutEffect

สองอย่างนี้แตกต่างกันยังไง แล้วเราควรจะเลือกใช้อันไหน เดี๋ยวเรามาลองดูกันฮะ

TLDR;

• useLayoutEffect ถ้ามีการเปลี่ยนแปลง DOM เช่น การวัดขนาด
• useEffect ถ้าไม่มีการยุ่งเกี่ยวหรือเปลี่ยนแปลง DOM (ส่วนใหญ่เรามักจะใช้อันนี้)

useEffect

เราจะใช้ useEffect เป็นหลัก ตัวอย่างเช่น ตอนที่เรา refactor จาก class components มาใช้ hooks เราก้มักจะย้ายโค้ดใน componentDidMount, componentDidUpdate และ componentWillUnMount มาไว้ที่ useEffect

ข้อแตกต่างระหว่าง useEffect กับ class คือ useEffect จะไม่มีการบล๊อคบราวเซอร์ painting มันจึงช่วยเรื่อง performance แต่ถ้าเป็น class (componentDidMount & componentDidUpdate) โค้ดจะทำงาน synchronously หลังการ render

ถ้าหากว่า useEffect มีการเปลี่ยนแปลง DOM (ด้วย ref) ในระหว่างการ render เราควรใช้ useLayoutEffect มากกว่า เพื่อป้องกันการ flickering

useLayoutEffect

จะทำงาน synchronously หลังจากการเปลี่ยนแปลง DOM ทันที การใช้งานเช่น เมื่อเราต้องรู้ตำแหน่งของ element หรือต้องการ re-render แบบ synchronous ด้วยการอัพเดต state วิธีการทำงานจะเหมือนกันกับ componentDidMount และ componentDidUpdate คือโค้ตจะทำงานทันทีหลังจากอัพเดต DOM แต่ก่อนการ paint ข้อดีคือช่วยป้องกันการ flickering และช่วยให้มั่นใจว่าโค้ดเราจะทำงานก่อนโค้ดอื่น

จบแล้ว นี้เป็นโพสสั้น ๆ หวังว่าคุณผู้อ่านจะได้ประโยชน์ไม่มากก็น้อยนะค้าบ

ขอบคุณบทความดี ๆ จากคุณ Kent C Dodds. แปลจากต้นฉบับ https://kentcdodds.com/blog/useeffect-vs-uselayouteffect