useEffect आणि useLayoutEffect मध्ये काय फरक आहे?

Question

Accepted Answer

दोन्ही effects चालवतात, परंतु **ब्राउজर पेंटच्या सापेक्ष वेगवेगळ्या क्षणी** — आणि हाच वेळेतील फरक संपूर्ण मुद्दा आहे.

- **`useEffect`** **ब्राउজर पेंट केल्यानंतर** चालवते. हे असिंक्रोनस आणि non-blocking आहे. लगभग सर्वकाहीसाठी (डेटा, सबस्क्रिप्शन, लॉगिंग) वापरा.
- **`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 लचकदार वाटायला देते, कारण ब्राउजर पूर्ण होईपर्यंत पेंट करू शकत नाही.
- हे **SSR दरम्यान चेतावणी देते** (हे सर्व्हरवर चालू शकत नाही, जेथे लेआउट नाही).

**मूठीचा नियम:** डिफॉल्टनुसार `useEffect`; फक्त `useLayoutEffect` सिंक्रोनस DOM मापन/उत्परिवर्तनसाठी वापरा जे अन्यथा फ्लिकर होतील.