useEffect మరియు useLayoutEffect మధ్య తేడా ఏమిటి?

Question

IT Interview Practice · Accepted Answer

రెండూ ప్రభావాలను నడుపుతాయి, కానీ **బ్రౌజర్ పెయింట్‌కు సంబంధించి వేరు వేరు సమయాల్లో** — మరియు ఆ సమయ వ్యత్యాసం సమస్త విషయం.

- **`useEffect`** బ్రౌజర్ చిత్రీకరించిన **తర్వాత** నడుపుతుంది. ఇది అసింక్రోనస్ మరియు నాన్-బ్లాకింగ్. దాదాపు ప్రతిదానికి (డేటా, సబ్‌స్క్రిప్షన్‌లు, లాగింగ్) ఉపయోగించండి.
- **`useLayoutEffect`** DOM మార్పు చేయబడిన తర్వాత కానీ బ్రౌజర్ చిత్రీకరించే **ముందు సమకాలీనంగా** నడుపుతుంది. మీరు లేఅవుట్ చదవాలి మరియు ఒక ఫ్రేమ్‌లో DOM ను మార్చవలసి ఉన్నప్పుడు గమనించదగిన మిunesco నుండి తప్పించుకోవడానికి ఉపయోగించండి.

```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` తో, అదే కోడ్ పెయింట్‌ తర్వాత నడుపుతుంది → ఒక ఫ్రేమ్ మిMovie.

## మీరు ఎందుకు డిఫాల్ట్‌ను చేరుకోకూడదు

- ఇది **చిత్రీకరణను అడ్డుకుంటుంది**: `useLayoutEffect` లో భారీ పని UI ను జాగ్రత్తగా ఉండేలా చేస్తుంది, ఎందుకంటే బ్రౌజర్ పూర్తి చేయువరకు చిత్రీకరించలేము.
- ఇది **SSR సమయంలో హెచ్చరిస్తుంది** (ఇది సర్వర్‌లో నడవదు, అక్కడ లేఅవుట్ లేదు).

**బ్రతుకుకు నియమం:** `useEffect` కు డిఫాల్ట్; సమకాలీన DOM కొలతలు/మార్పుల కోసం మాత్రమే `useLayoutEffect` ఉపయోగించండి ఇతర విధంగా మిMovie.

మీరు ఎప్పుడైనా useLayoutEffect అవసరం ఎందుకు

మీరు ఎందుకు డిఫాల్ట్‌ను చేరుకోకూడదు

సంబంధిత ప్రశ్నలు