હૂક્સના નિયમો શું છે? તમે શરતી રીતે હૂક કૉલ કરી શકતા નથી કેમ?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, વગેરે) બે નિયમો છે:

1. **હૂક્સને ફક્ત ટોચ સ્તરે કૉલ કરો** — ક્યારેય શરતો, લૂપ્સ અથવા નેસ્ટેડ ફંક્શનોની અંદર નહીં.
2. **હૂક્સને ફક્ત React ફંક્શનથી કૉલ કરો** — ઘટકો અથવા અન્ય કસ્ટમ હૂક્સ.

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

## અમલ કેમ સ્થિર હોવો જોઈએ

React નામ દ્વારા હૂક્સને **ઓળખતો નથી** — તે **કૉલ ક્રમ** પર આધાર રાખે છે. દરેક રેન્ડર પર તે બરાબર તેવા જ ક્રમમાં હૂક્સમાંથી ચાલે છે અને દરેક કૉલને આંતરિક સૂચીમાં સ્લોટ સાથે જોડે છે:

```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
```

જો તમે હૂક્સને શરતી રીતે કૉલ કરો તો, કૃતિ વચ્ચે ક્રમ બદલાઈ શકે છે. તે પછી સ્લોટ 1 એક કૃતિ પર `useState(B)` અને આગલા પર `useEffect` હોઈ શકે છે — React ખોટા હૂક્સને ખોટો સ્થિતી આપશે, બધું કૉરપ્ટ કરશે.

## શરતી તર્કને યોગ્ય રીતે કેવી રીતે લખવું

હૂક્સને બિનશરતી રાખો અને શરત **તેની અંદર** મૂકો અથવા તે તેને પાછું આપે તે મૂલ્ય પર શાખા કરો:

```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 નિયમ આ નિયમોને આપમેળે લાગુ કરે છે.