Hooks এর নিয়মগুলি কী? আপনি কেন শর্তসাপেক্ষভাবে একটি hook কল করতে পারবেন না?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, ইত্যাদি) দুটি নিয়ম আছে:

1. **শুধুমাত্র শীর্ষ স্তরে hooks কল করুন** — কখনও শর্ত, লুপ বা নেস্টেড ফাংশনের ভিতরে নয়।
2. **শুধুমাত্র React ফাংশন থেকে hooks কল করুন** — কম্পোনেন্ট বা অন্যান্য কাস্টম hooks।

```jsx
function Profile({ id }) {
  const [user, setUser] = useState(null); // ✅ top level
  if (id) {
    const [x] = useState(0);  // ❌ conditional hook — breaks React
  }
}
```

## কেন ক্রম স্থিতিশীল হতে হবে

React **নাম দ্বারা** hooks চিহ্নিত করে না — এটি **কল অর্ডার** এর উপর নির্ভর করে। প্রতিটি render এ এটি হুকসকে একই ক্রমে চলে এবং প্রতিটি কলকে একটি অভ্যন্তরীণ তালিকায় একটি স্লটের সাথে মেলায়:

```text
Render 1:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
Render 2:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
```

যদি আপনি শর্তসাপেক্ষে একটি hook কল করেন তবে অর্ডার render এর মধ্যে পরিবর্তন হতে পারে। তখন স্লট 1 একটি render এ `useState(B)` এবং পরবর্তীটিতে `useEffect` হতে পারে — React ভুল অবস্থা ভুল hook এ প্রদান করবে, সবকিছু নষ্ট করবে।

## শর্তসাপেক্ষ লজিক সঠিকভাবে কীভাবে লিখতে হয়

হুক অপ্রত্যাশিত রাখুন এবং শর্ত **এর ভিতরে** রাখুন বা এটি যে মান প্রদান করে তার উপর ভিত্তি করে শাখা করুন:

```jsx
const [user, setUser] = useState(null);
useEffect(() => {
  if (!id) return;       // condition INSIDE the effect, not around it
  fetchUser(id).then(setUser);
}, [id]);
```

`eslint-plugin-react-hooks` lint নিয়ম স্বয়ংক্রিয়ভাবে এই নিয়মগুলি প্রয়োগ করে।