Ποια είναι η διαφορά μεταξύ useEffect και useLayoutEffect;

Question

Accepted Answer

Και οι δύο εκτελούν effects, αλλά σε **διαφορετικές στιγμές σχετικά με τη ζωγραφική του περιηγητή** — και αυτή η διαφορά χρονισμού είναι όλη η ιδέα.

- **`useEffect`** εκτελείται **μετά** από το ζωγράφισμα του περιηγητή. Είναι ασύγχρονο και μη-αποκλειστικό. Χρησιμοποιήστε το για σχεδόν τα πάντα (δεδομένα, συνδρομές, καταγραφή).
- **`useLayoutEffect`** εκτελείται **σύγχρονα μετά τη μετάλλαξη του DOM αλλά ΠΡΙΝ το ζωγράφισμα του περιηγητή**. Χρησιμοποιήστε το όταν πρέπει να διαβάσετε τη διάταξη και να αλλάξετε το DOM στο ίδιο καρέ για να αποφύγετε ορατό τρεμόπλιγμα.

```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`, ο ίδιος κώδικας εκτελείται μετά το ζωγράφισμα → ένα τρεμόπλιγμα ενός καρέ.

## Γιατί δεν θα πρέπει να το χρησιμοποιείτε από προεπιλογή

- **Αποκλείει το ζωγράφισμα**: βαρύ έργο στο `useLayoutEffect` κάνει την διεπαφή ακατάστατη, επειδή ο περιηγητής δεν μπορεί να ζωγραφίσει μέχρι να τελειώσει.
- **Προειδοποιεί κατά το SSR** (δεν μπορεί να εκτελεστεί στον διακομιστή, όπου δεν υπάρχει διάταξη).

**Κανόνας του αντίχειρα:** προεπιλογή στο `useEffect`; χρησιμοποιήστε το `useLayoutEffect` μόνο για σύγχρονες μετρήσεις/μεταλλάξεις DOM που διαφορετικά θα τρεμόπλιζαν.