ਹੁੱਕਸ ਦੇ ਨਿਯਮ ਕੀ ਹਨ? ਤੁਸੀਂ ਹੁੱਕ ਨੂੰ ਸ਼ਰਤੀ ਤੌਰ 'ਤੇ ਕਿਉਂ ਨਹੀਂ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ?

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 ਨੂੰ ਨਾਮ ਦੁਆਰਾ ਪਛਾਣਦਾ **ਨਹੀਂ** — ਇਹ **ਕਾਲ ਕ੍ਰਮ** 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਹਰ ਰੈਂਡਰ ਤੋਂ ਪਹਿਲਾਂ ਇਹ ਮੁਤਾਬਕ ਕ੍ਰਮ ਵਿੱਚ hooks ਨੂੰ ਮਾਰਦਾ ਹੈ ਅਤੇ ਹਰ ਕਾਲ ਨੂੰ ਇੱਕ ਅਨੁਮਤ ਸੂਚੀ ਵਿੱਚ ਇੱਕ ਥਾਂ ਨਾਲ ਮੇਲਿਆ ਜਾਂਦਾ ਹੈ:

```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 ਗਲਤ ਸਥਿਤੀ ਨੂੰ ਗਲਤ hook ਨੂੰ ਦੇਵੇਗਾ, ਸਭ ਕੁਝ ਖਰਾਬ ਕਰ ਦੇਵੇਗਾ।

## ਸ਼ਰਤੀ ਤਰਕ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਕਿਵੇਂ ਲਿਖਿਆ ਜਾਵੇ

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 ਨਿਯਮ ਇਹ ਨਿਯਮਾਂ ਨੂੰ ਸਵੈ ਚਲਤ ਢੰਗ ਨਾਲ ਲਾਗੂ ਕਰਦੇ ਹਨ।