Hooks του ReactExplained

24 of 24 rows

Hook↕	Τι κάνει↕	Πού το χρησιμοποιείς↕
State
⤢useState	Κρατά μία τιμή που προκαλεί re-render όταν αλλάζει.	Τοπικό state συνιστώσας: πεδία φόρμας, διακόπτες, μετρητές.
⤢useReducer	Κρατά state που οδηγείται από ένα reducer ενεργειών, σαν ένα μικρό store.	State με πολλά συσχετισμένα πεδία ή σύνθετες μεταβάσεις.
⤢useRef	Κρατά μία μεταβλητή τιμή που ΔΕΝ προκαλεί re-render.	Μεταβλητά κοντέινερ, χρονόμετρα και άμεση πρόσβαση στο DOM μέσω .current.
Effects
⤢useEffect	Εκτελεί μια παρενέργεια μετά το render, με προαιρετικό καθαρισμό.	Φόρτωση δεδομένων, συνδρομές και συγχρονισμός με εξωτερικό σύστημα.
⤢Effect cleanup	Η συνάρτηση που επιστρέφει ένα effect τρέχει πριν το επόμενο effect και ξανά κατά το unmount.	Κλείσιμο συνδρομών και χρονομέτρων, ή ματαίωση ενός fetch σε εξέλιξη.
⤢useLayoutEffect	Όπως το useEffect, αλλά εκτελείται συγχρόνως μετά την αλλαγή του DOM.	Ανάγνωση ή εγγραφή layout πριν ζωγραφίσει ο browser (toasts, tooltips).
⤢useEffect vs handlers	Οι handlers εκτελούνται ως απόκριση σε ενέργεια χρήστη· τα effects τρέχουν μετά το render για συγχρονισμό.	Λογική που προκαλεί ο χρήστης ανήκει σε handler, λογική που προκαλεί το render σε effect.
⤢StrictMode	Στην ανάπτυξη, κάνει mount τις συνιστώσες δύο φορές ώστε τα effects να τρέξουν, να καθαρίσουν και να τρέξουν ξανά.	Εντοπισμός διπλών συνδρομών και ελλιπούς καθαρισμού πριν την παραγωγή.
Απόδοση
⤢useMemo	Κρατά σε cache μια υπολογισμένη τιμή μέχρι να αλλάξουν οι εξαρτήσεις της.	Αποφυγή ακριβών επανυπολογισμών μεταξύ renders· άλλαξε σκόπιμα μια τιμή στα deps για να αδειάσεις την cache.
⤢useCallback	Κρατά σε cache μια αναφορά συνάρτησης μέχρι να αλλάξουν οι εξαρτήσεις της.	Σταθερά callbacks που περνάνε σε memoized παιδιά ή χρησιμοποιούνται ως deps.
⤢React.memo	Παρακάμπτει το re-render συνιστώσας της οποίας τα props δεν άλλαξαν.	Βαριά παιδιά· δώσε μια συνάρτηση σύγκρισης ως δεύτερο όρισμα όταν η ρηχή ισότητα δεν φτάνει (HOC, όχι hook).
Context και εξωτερικά handles
⤢useContext	Διαβάζει μια τιμή context χωρίς prop drilling.	Θέμα, locale ή χρήστης ελέγχου πρόσβασης κοινόχρηστος σε όλο το δέντρο.
⤢useImperativeHandle	Προσαρμόζει το στιγμιότυπο που βλέπει ένας γονέας μέσα από ref.	Έκθεση ενός εστιασμένου API από παιδί μέσω forwardRef.
Concurrency και άλλα
⤢useTransition	Σημαδεύει μια ενημέρωση state ως μη επείγουσα, ώστε το UI να μένει ευέλικτο.	Το input να μένει ζωντανό όσο ένας βαρύς κατάλογος ξαναγίνεται render.
⤢useDeferredValue	Αναβάλλει μια τιμή ώστε οι ενημερώσεις να μπορούν να διακοπούν.	Debounce ακριβών renders χωρίς χρονόμετρα.
⤢useId	Δημιουργεί ένα σταθερό μοναδικό id για χαρακτηριστικά προσβασιμότητας.	Σύνδεση label και input μεταξύ server και client render.
⤢use()	Διαβάζει ένα promise ή context κατά το render· το μοναδικό hook που μπορείς να καλέσεις υπό συνθήκη.	Ξεδίπλωμα promise με Suspense ή ανάγνωση context μέσα σε πρόωρο return.
⤢useActionState	Κρατά state που οδηγείται από μια ενέργεια φόρμας, με σημαία pending συμπεριλαμβανμένη.	Υποβολές φόρμας που επιστρέφουν σφάλματα ή ενημερωμένο state για εμφάνιση επιτόπου.
⤢useOptimistic	Κάνει render μια αισιόδοξη τιμή αμέσως και επανέρχεται στο πραγματικό state όταν ολοκληρωθεί η ενέργεια.	Εμφάνιση ενός like ή ενός σταλμένου μηνύματος όσο το αίτημά του στον server εκτελείται.
⤢useFormStatus	Διαβάζει την κατάσταση pending του περιβάλλοντος <form>, χωρίς props.	Ένα κουμπί υποβολής που απενεργοποιεί τον εαυτό του όσο η γονική του φόρμα υποβάλλεται.
⤢useSyncExternalStore	Εγγράφεται σε ένα store εκτός React και διαβάζει ένα συνεπές snapshot.	API του browser όπως η κατάσταση σύνδεσης, ή state stores τρίτων.
⤢useInsertionEffect	Τρέχει πριν τα layout effects, φτιαγμένο για έγχυση κανόνων CSS-in-JS.	Βιβλιοθήκες στυλ που πρέπει να εισάγουν κανόνες πριν διαβαστεί το layout.
⤢useDebugValue	Δείχνει μια δική του ετικέτα για το εσωτερικό state ενός hook στα React DevTools.	Σήμανση του τι κρατά ένα custom hook κατά τον εντοπισμό σφαλμάτων.
⤢Custom hooks (use*)	Το δικό σου hook που συνδυάζει τα ενσωματωμένα για κοινή χρήση λογικής.	Επαναχρησιμοποιήσιμη συμπεριφορά με state όπως useFetch ή useMediaQuery.