useEffect এবং useLayoutEffect এর মধ্যে পার্থক্য কী?

Question

Accepted Answer

উভয়ই effects চালায়, কিন্তু **ব্রাউজার পেইন্টের সাপেক্ষে বিভিন্ন সময়ে** — এবং এই টাইমিং পার্থক্যই সম্পূর্ণ বিষয়।

- **`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 পরিমাপ/মিউটেশনের জন্য যা অন্যথায় ফ্লিকার করবে।