ความแตกต่างระหว่าง useEffect และ useLayoutEffect คืออะไร?

Question

Accepted Answer

ทั้งสองทำให้เกิดผลกระทบ แต่ที่ **เวลาต่างกัน เมื่อเทียบกับการวาด** — และความแตกต่างของเวลานี้คือประเด็นทั้งหมด

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

```text
render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
```

## ทำไมคุณถึงต้องใช้ useLayoutEffect

จินตนาการว่าวัดองค์ประกอบและจัดเรียงใหม่เครื่องมือแสดงความเห็นตามขนาดของมัน ด้วย `useEffect` ผู้ใช้จะเห็นเครื่องมือแสดงความเห็นในตำแหน่งที่ผิดเพียงสั้น ๆ แล้วมันจะกระโดด:

```jsx
useLayoutEffect(() => {
  const { height } = ref.current.getBoundingClientRect();
  setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
```

ด้วย `useEffect` โค้ดเดียวกันทำงานหลังวาด → การกระพริบหนึ่งเฟรม

## ทำไมคุณไม่ควรพึ่งพาโดยค่าเริ่มต้น

- มัน **บล็อกการวาด**: งานหนักใน `useLayoutEffect` ทำให้ UI รู้สึก janky เพราะเบราว์เซอร์ไม่สามารถวาดได้จนกว่าจะเสร็จสิ้น
- มัน **เตือน ในระหว่าง SSR** (ไม่สามารถทำงานบนเซิร์ฟเวอร์ที่ไม่มีเค้าโครง)

**กฎง่าย ๆ:** ใช้ `useEffect` เป็นค่าเริ่มต้น เพียงใช้ `useLayoutEffect` สำหรับการวัด/การเปลี่ยนแปลง DOM แบบซิงโครนัสที่มิฉะนั้นจะกระพริบ