useEffect ਅਤੇ useLayoutEffect ਵਿਚ ਕੀ ਫਰਕ ਹੈ?

Question

IT Interview Practice · 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` ਨੂੰ ਡਿਫਾਲਟ ਕਰੋ; ਸਿਰਫ `useLayoutEffect` ਨੂੰ ਸਮੇ DOM ਪਰਿਮਾਪਣ/ਮੁਟੇਸ਼ਨ ਲਈ ਵਰਤੋ ਜੋ ਨਹੀਂ ਤਾਂ ਫਲਿਕਰ ਕਰਦੇ।

ਤੁਹਾਨੂੰ useLayoutEffect ਦੀ ਕਦੇ ਲੋੜ ਕਿਉਂ ਹੋ ਸਕਦੀ ਹੈ

ਤੁਸੀਂ ਡਿਫਾਲਟ ਤੌਰ ਤੇ ਇਸ ਤੱਕ ਕਿਉਂ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦੇ

ਸੰਬੰਧਿਤ ਸਵਾਲ