Το Hook Εffect useEffect στο React

Για την εργασία με effects χρησιμοποιείται το hook useEffect. Ας δούμε πώς λειτουργεί.

Αρχικά, εισάγουμε το hook μας:

App.jsximport { useEffect } from 'react';

Δημιουργούμε ένα component App που περιέχει μια επικεφαλίδα:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

Ας υποθέσουμε ότι πρέπει να κάνουμε κάποια δράση μετά το rendering, για παράδειγμα, να ορίσουμε το χρώμα φόντου ολόκληρης της σελίδας. Σε αυτή την περίπτωση, το εξωτερικό σύστημα θα είναι το DOM του browser.

Εφαρμόζουμε το hook μας:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'green';
  }, []);
  
  ...
}

Στη δεύτερη παράμετρο μεταβιβάζεται ένας πίνακας εξαρτήσεων. Σε αυτές περιλαμβάνονται τιμές που χρησιμοποιούνται από τις συναρτήσεις του component. Προς το παρόν τον αφήσαμε κενό. Σε αυτή την περίπτωση, το χρώμα θα οριστεί σε πράσινο μόνο μία φορά μετά το rendering. Δεν μπορούμε να αφαιρέσουμε εντελώς τη δεύτερη παράμετρο, καθώς το component σας μπορεί να μπει σε έναν άπειρο βρόγχο.