როგორ აირჩიეთ state management მიდგომა React-ში?

Question

Accepted Answer

შეუთავსეთ ინსტრუმენტი state-ის **ტიპს**, ნაცვლად იმისა, რომ სტანდარტულად გლობალური store-ზე მოხვიდეთ. ყველაზე მეტი "გლობალური state" პრობლემა ნამდვილად არასწორი ინსტრუმენტის გამოყენებაა.

## გადაწყვეტილების სახელმძღვანელო

```text
Local UI state (toggle, input)      → useState / useReducer
Shared, low-frequency (theme, user) → Context
Server/API data                     → React Query / SWR  (NOT a global store)
Complex global client state         → Zustand / Jotai / Redux Toolkit
URL-shareable state (filters, page) → the URL (search params)
```

## ყველაზე მნიშვნელოვანი ინსაიტი: server state ≠ client state

API-დან მოწოდებული მონაცემი **cache** არის დაშორებული მონაცემების, ის state არ არის, რომელიც თქვენ გაქვთ. Redux-ში ჩასმა ნიშნავს, რომ თქვენ ხელით უნდა გაუმკლავდეთ loading-ს, caching-ს, refetching-ს და invalidation-ს — მტკივნეული და ხარვეზებით სავსე. server-state ბიბლიოთეკა ამ ყველაფერს აკეთებს:

```jsx
// handles caching, dedup, background refetch, stale-while-revalidate for free
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## ხელმძღვანელი პრინციპები

- state-ი რაც შეიძლება **ლოკალური** რადგან იყო; მოათავსეთ იქ, სადაც იყენებთ.
- სწრაფად ცვალებადი მნიშვნელობები არ ჩასვით **Context**-ში (ყველა consumer-ს ხელახლა რენდერდება).
- გაზიარებული client state-სთვის ხშირი განახლებით, ნაკრებზე გამოიყენეთ **selective subscriptions** (Zustand/Jotai), ისე რომ კომპონენტები მხოლოდ ის slice-ისთვის რენდერდება, რომელსაც კითხულობენ.
- Redux Toolkit-ზე მიმართეთ, როდესაც გჭირდებათ მისი devtools/middleware/structure გაკამტკამებული გაზიარებული state-ზე.

უნარის ღირებულება არის **state-ის შემცირება და სწორი განთავსება** — ბიბლიოთეკის არჩევა არ არის.