როგორ მუშაობს useState hook?

Question

Accepted Answer

`useState` აძლევს ფუნქცია კომპონენტს **ლოკალურ, რეაქტიულ state**-ს. ის უბრუნდება წყვილს: **მიმდინარე მნიშვნელობას** და **setter** ფუნქციას. setter-ის გამოძახება განრიგრიგებს ხელახლა რენდერირებას ახალი მნიშვნელობით.

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## ორი რამ, რომელიც დამწყებებს აკვნევს

**1. განახლებები ასინქრონულია / თაბულირებული.** `count` არ იცვლება `setCount`-ის შემდეგ სტრიქონზე; მას აქვს ახალი მნიშვნელობა *შემდეგი* რენდერირებაზე. ამიტომ ეს მხოლოდ ერთხელ იზრდება:

```jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
```

იყენებთ **functional updater**-ს როდესაც ახალი მნიშვნელობა წინა მნიშვნელობაზე დამოკიდებულია, რადგან React აგზავნის ბოლო მნიშვნელობას:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
```

**2. საწყისი მნიშვნელობა გამოიყენება მხოლოდ პირველ რენდერირებაზე.** ძვირადღირებული ნაგულისხმევის შემთხვევაში, ფუნქციის გადაცემა, რათა ის ერთხელ გაშვდეს (lazy init):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## რატომ არის ეს მნიშვნელოვანი

State არის ის, რაც კომპონენტს ინტერაქტიულს ხდის — React აკეთებს ფუნქციას ხელახლა და აკეთებს UI-ს ხელახლა ყოველი ჯერ, როდესაც state იცვლება.

board state-ს **შეუცვლელი**: შექმენით ახალი array/object ცვლილების ნაცვლად, მაგ. `setItems([...items, x])`, წინააღმდეგ შემთხვევაში React შეიძლება ზეიმ არ დაინიშნოს ცვლილება.