Hooks నియమాలు ఏమిటి? మీరు hook ని షర్తుపర్తుగా ఎందుకు కాల్ చేయలేరు?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, మరియు.) రెండు నియమాలను కలిగి ఉన్నాయి:

1. **Top level వద్ద మాత్రమే hooks ని కాల్ చేయండి** — ఎప్పుడూ conditions లో, loops లో లేదా nested functions లో లేదు.
2. **React functions నుండి మాత్రమే 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 పై ఇది hooks నిండా అదే క్రమంలో నడుస్తుంది మరియు ప్రతి కాల్ ను అంతర్గత జాబితాలో ఒక 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 ని షర్తుపర్తుగా కాల్ చేస్తే, renders మధ్య ఆర్డర్ మార్చవచ్చు. అప్పుడు slot 1 ఒక render లో `useState(B)` మరియు తదుపరి render లో `useEffect` ఉండవచ్చు — React తప్పుడు state ని తప్పుడు hook కు ఇచ్చి, సবकటినా కలుషితం చేస్తుంది.

## షర్తుపర్తు logic సరిగా ఎలా రాయాలి

Hook ని unconditional ముఖ్యమైనదిగా ఇచ్చి condition ని **లోపల** ఉంచండి, లేదా అది తిరిగి చేసే విలువ ఆధారంగా 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 ఈ నియమాలను స్వయంచాలకంగా ఉపయోగిస్తుంది.