რა განსხვავებაა useEffect-სა და useLayoutEffect-ს შორის?

Question

Accepted Answer

ორივე აწარმოებს effects-ებს, მაგრამ **ბრაუზერის paint-ის შედარებით სხვადსხვა მომენტში** — და ამ დროის განსხვავება სწორედ მთავარი პუნქტია.

- **`useEffect`** აწარმოებს **მას შემდეგ**, როდესაც ბრაუზერმა დახატა. ეს არის asynchronous და non-blocking. გამოიყენეთ ისგან თითქმის ყველაფრისთვის (data, subscriptions, logging).
- **`useLayoutEffect`** აწარმოებს **სინქრონულად DOM-ის შეცვლის შემდეგ, მაგრამ ბრაუზერის paint-მდე**. გამოიყენეთ მაშინ, როდესაც უნდა წაიკითხოთ layout და შეცვალოთ DOM ერთი frame-ში, რათა თავიდან აიცილოთ ხილული flicker.

```text
render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
```

## რატომ შეიძლება გჭირდეთ useLayoutEffect

თქვენ ზომავთ ელემენტს და ხელახლა ათავსებთ tooltip-ს მისი ზომის საფუძველზე. `useEffect`-ის პირველ შემთხვევაში, მომხმარებელი მოკლედ დაინახავს tooltip-ს არასწორ ადგილას, შემდეგ ის გადახტება:

```jsx
useLayoutEffect(() => {
  const { height } = ref.current.getBoundingClientRect();
  setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
```

`useEffect`-ის დროს, იგივე კოდი აწარმოებს paint-ის შემდეგ → ერთი frame-ის flicker.

## რატომ არ უნდა მიმართოთ ამას ნაგულისხმევად

- ეს **ხელს უშლის paint-ს**: მძიმე სამუშაო `useLayoutEffect`-ში ხდის UI-ს დარტყმულ, რადგან ბრაუზერი ვერ ხატავს სანამ დასრულდება.
- ეს **გააფრთხოებს SSR-ის დროს** (ის ვერ აწარმოებს სერვერზე, სადაც layout არ არსებობს).

**თეორემის წესი:** ნაგულისხმევად `useEffect`; გამოიყენეთ `useLayoutEffect` მხოლოდ სინქრონული DOM measurements/mutations-ისთვის, რომელიც სხვაგვარად flicker იქნებოდა.