Δώστε παραδείγματα για το τι μπορεί να κάνει κανείς με το hook useEffect, εκτός από την εκτέλεση αιτημάτων στον διακομιστή.

Διαχείριση της κατάστασης του τίτλου της σελίδας (document.title).

Εγγραφή και διαγραφή από γεγονότα του περιηγητή (π.χ., αλλαγή μεγέθους παραθύρου, κλικ εκτός στοιχείου):

useEffect(() => {
  const handleResize = () => {
    console.log('Το μέγεθος του παραθύρου άλλαξε');
  };
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Άδειος πίνακας εξαρτήσεων: το effect εκτελείται μία φορά κατά την εγκατάσταση και καθαρίζεται κατά την αποσυναρμολόγηση.

Εργασία με τοπική αποθήκευση (ανάγνωση/εγγραφή δεδομένων):

useEffect(() => {
  const savedValue = localStorage.getItem('myInputValue');
  if (savedValue) {
    setInputValue(savedValue); // Υπάρχει κατάσταση inputValue και λειτουργία setInputValue
  }
}, []); // Φόρτωση τιμής κατά την εγκατάσταση.

useEffect(() => {
  localStorage.setItem('myInputValue', inputValue); // Αποθήκευση κατά την αλλαγή του inputValue.
}, [inputValue]); // Εξάρτηση από inputValue.

Αρχικοποίηση βιβλιοθηκών ή συστατικών τρίτων.

Ρύθμιση και καθαρισμός χρονόμετρων (setTimeout, setInterval):

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('Ο χρονόμετρος λειτουργεί');
  }, 1000);

  return () => {
    clearInterval(timerId); // Καθαρισμός διαστήματος κατά την αποσυναρμολόγηση.
  };
}, []);

Παρακολούθηση αλλαγών σε props ή κατάσταση και εκτέλεση ενεργειών ως απάντηση.

Εστίαση σε στοιχείο κατά την εγκατάσταση του συστατικού:

useEffect(() => {
  inputRef.current.focus(); // Υπάρχει αναφορά inputRef
}, []);