რა არის Hooks-ის წესები? რატომ არ შეგიძლია hook-ის დამახასიათება პირობითად?

Question

Accepted Answer

Hooks-ებს (`useState`, `useEffect`, და ა.შ.) ორი წესი აქვთ:

1. **მხოლოდ hooks-ები ზედა დონეზე დაიძახეთ** — არასოდეს პირობებში, მარყებში ან ჩასმული ფუნქციებში.
2. **მხოლოდ React ფუნქციებიდან დაიძახეთ hooks** — კომპონენტები ან სხვა 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-ებს სახელით — ის ეყრდნობა **დაძახების წესრიგს**. თითოეული რენდერის დროს ის ხეტის 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
```

თუ პირობითად დაიძახებთ hook-ს, წესრიგი შეიძლება შეიცვალოს რენდერებს შორის. შემდეგ სლოტი 1 შეიძლება იყოს `useState(B)` ერთ რენდერზე და `useEffect` მეორეზე — React გადასცემს მცდარ state-ს მცდარ 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 წესი ავტომატურად ახელმძღვანელებს ამ წესებს.