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 ஐ முறுக்குண்டதாக உணர்வுறுத்துகிறது, ஏனெனில் உலாவி முடியும் வரை வரைய முடியாது.
- இது **SSR ற்றை எச்சரிக்கிறது** (சர்வரில் இயக்க முடியாது, அங்கு தளம் இல்லை).

**கட்டைவிரல் விதி:** `useEffect` க்கு இயல்பு; ஒத்திசைவான DOM அளவீடுகள்/மாற்றங்களுக்கு மட்டுமே `useLayoutEffect` பயன்படுத்தவும் இல்லையெனில் மினுக்குவிக்க முடியும்.