รูปแบบที่แตกต่างกันของ Hook useEffect ใน React

Hook useEffect ยังมีรูปแบบอื่นๆอีก ซึ่งมีความจำเพาะและถูกใช้น้อยมาก ดังนั้นเราจะกล่าวถึงพวกมันโดยย่อ

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

รูปแบบที่สองคือ Hook useInsertionEffect ซึ่งทำงานก่อนที่จะมี การเปลี่ยนแปลงใดๆ ต่อ DOM tree นั่นคือในขณะที่ refs ยังไม่ได้แนบและ DOM ยังไม่ได้อัปเดต ถูกนำมาใช้หลักในที่ซึ่งจำเป็นต้อง แทรกสไตล์แบบไดนามิกจาก CSS-in-JS libraries ก่อนการเปลี่ยนแปลง DOM