Hooks களின் விதிகள் என்ன? நீங்கள் ஒரு hook ஐ நிபந்தனையுடன் அழைக்க முடியாது?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, முதலியன) இரண்டு விதிகளைக் கொண்டுள்ளது:

1. **Hooks ஐ உச்ச நிலையில் மட்டுமே அழைக்கவும்** — நிபந்தனைகளின் உள்ளே, loops இல் அல்லது nested functions இல் ஒருபோதும் இல்லை.
2. **React செயல்பாடுகளிலிருந்து மட்டுமே hooks ஐ அழைக்கவும்** — components அல்லது பிற custom 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 இல் இது hook களை சரியான வரிசையில் சென்று ஒவ்வொரு அழைப்பையும் உள் பட்டியலில் ஒரு slot க்கு பொருத்துகிறது:

```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 களுக்கு இடையில் மாறக்கூடும். பின்னர் slot 1 ஒரு render இல் `useState(B)` இருக்கலாம் மற்றும் அடுத்த render இல் `useEffect` இருக்கலாம் — React தவறான state ஐ தவறான hook க்கு கொடுத்து, எல்லாவற்றையும் இயக்க முடியாது.

## நிபந்தனைமுறை தர்க்கம் சரியாக எப்படி எழுதுவது

hook ஐ நிபந்தனையின்றி வைத்து நிபந்தனையை **உள்ளே** வைக்கவும், அல்லது அது திரும்பும் மதிப்பின் அடிப்படையில் branch செய்யவும்:

```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 rule இந்த விதிகளை தானாக பயன்படுத்துகிறது.