useEffect और useLayoutEffect के बीच क्या अंतर है?

Question

Accepted Answer

दोनों प्रभाव चलाते हैं, लेकिन **ब्राउज़र पेंट के सापेक्ष विभिन्न क्षणों पर** — और यह समय अंतर पूरा मुद्दा है।

- **`useEffect`** ब्राउज़र के पेंट करने के **बाद** चलता है। यह asynchronous और non-blocking है। इसे लगभग सब कुछ के लिए उपयोग करें (डेटा, सदस्यता, लॉगिंग)।
- **`useLayoutEffect`** **DOM के mutation के बाद लेकिन ब्राउज़र के पेंट करने से पहले** synchronously चलता है। इसका उपयोग तब करें जब आपको layout पढ़ना और DOM को दिखाई देने वाली flicker से बचने के लिए एक ही frame में बदलना हो।

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

## आप कब useLayoutEffect की जरूरत पड़ेगी

कल्पना करें कि एक element को measure कर रहे हैं और इसके आकार के आधार पर एक tooltip को reposition कर रहे हैं। `useEffect` के साथ, उपयोगकर्ता को tooltip गलत जगह पर संक्षेप में दिखाई देगा, फिर यह jump करता है:

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

`useEffect` के साथ, वही code paint के बाद चलता है → एक-frame flicker।

## आपको इसे default रूप से क्यों नहीं प्राप्त करना चाहिए

- यह **painting को block करता है**: `useLayoutEffect` में heavy काम UI को janky महसूस कराता है, क्योंकि ब्राउज़र पेंट नहीं कर सकता जब तक यह समाप्त न हो जाए।
- यह **SSR के दौरान चेतावनी देता है** (यह server पर नहीं चल सकता, जहां कोई layout नहीं है)।

**अंगूठा नियम:** default से `useEffect`; केवल synchronous DOM measurements/mutations के लिए `useLayoutEffect` का उपयोग करें जो अन्यथा flicker करेंगे।