რა არის useEffect და როდის გაშვებულ ხდება?

Question

Accepted Answer

`useEffect` გაშვებულ ხდება **გვერდითი ეფექტები** — ის სამუშაოები, რომლებიც React-ის რენდერინგის გარეთ ხდება, როგორიცაა მონაცემების მოძიება, გამოწერა, ტაიმერები ან ხელით DOM-ის განახლებები. ის გაშვებულ ხდება **შემდეგ**, როდესაც კომპონენტი რენდერდება, რაც გვერდით ეფექტებს რენდერის სხეულიდან გარეთ ინახავს (რენდერი უნდა დარჩეს სუფთა).

## დამოკიდებულების მასივი აკონტროლებს დროს

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → გაშვებულ ხდება პირველი რენდერის შემდეგ და როდესაც `count` შეიცვალა.
- **`[]`** (ცარიელი) → გაშვებულ ხდება **ერთხელ** mount-ის შემდეგ (კარგია ერთჯერ კონფიგურაციისთვის).
- **გამოტოვებული** → გაშვებულ ხდება **ყოველი** რენდერის შემდეგ (იშვიათად ის რაც გსურს).

## გამწმენდი: დააბრუნეთ ფუნქცია

თუ ეფექტი რაღაცას დაყენებს, რაც გადახურვის საჭიროებას, დააბრუნეთ გამწმენდი ფუნქცია. React იძახებს მას შემდეგი ეფექტის გაშვებამდე და როდესაც კომპონენტი unmount ხდება:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## რატომ აქვს მნიშვნელობა გამწმენდს

მის გარეშე, ყოველი ხელმეორედ გაშვება კიდევ ერთ ტაიმერს/გამოწერას დამატებდა და ოდესმე არ შეცვლიდა ძველს — კლასიკური მეხსიერების გაჟონვა. `[dep]` ეფექტის ცხოვრების ციკლი არის: *გაშვებული ეფექტი → (dep იცვლება) → გაშვებული გამწმენდი → გაშვებული ეფექტი ისევ*.

**რჩევა:** არ გამოიყენოთ ეფექტები რათ რომელი რიცხვი შეგიძლიათ გამოთვალოთ რენდერის დროს (სამაგიეროდ მიღებული მნიშვნელობები), და მოიცავეთ ყოველი მნიშვნელობა რომელსაც ეფექტი კითხულობს დამოკიდებულების მასივში (`react-hooks/exhaustive-deps` lint წესი დამხმარე ხელს სცემს).