Refs στο React

Αν θέλουμε να απομνημονεύσουμε κάποια πληροφορία, αλλά δεν θέλουμε η αλλαγή της να προκαλεί render του component, τότε θα μας φανούν χρήσιμα τα refs και αντίστοιχα το hook useRef, που λειτουργεί με αυτά.

Ένα ref (ή αναφορά) είναι ένα συνηθισμένο αντικείμενο JavaScript με μία μόνο ιδιότητα current, την οποία μπορείτε να διαβάσετε ή να αλλάξετε.

Όπως και τα state, τα refs μπορούν να αποθηκεύσουν οποιονδήποτε τύπο δεδομένων - μπορεί να είναι αριθμοί, strings, αντικείμενα και ακόμη και συναρτήσεις.

Αν τα δεδομένα σας χρησιμοποιούνται για render, τότε αποθηκεύστε τα στο state, ενώ αν δεν χρειάζεστε render, σε αυτήν την περίπτωση η χρήση refs μπορεί να είναι πιο αποτελεσματική. Επιπλέον, σε αντίθεση με το state, η τιμή του ref αλλάζει αμέσως.

Γενικά, τα refs εφαρμόζονται εκεί donde πρέπει να απομακρυνθείτε από το React και να αλληλεπιδράσετε με εξωτερικά API - συχνότερα με του browser, που δεν επηρεάζουν την εμφάνιση του component. Αυτό μπορεί να είναι για παράδειγμα η αποθήκευση του id ενός timer ή η αποθήκευση ενός αντικειμένου, για το οποίο δεν χρειάζεται να υπολογιστεί JSX, αλλά πιο συχνά είναι η αλληλεπίδραση με στοιχεία DOM. Μπορούν να χρησιμοποιηθούν για τη διαχείριση εστίασης, επιλογής κειμένου ή αναπαραγωγής πολυμέσων.

Στο επόμενο μάθημα θα αναλύσουμε τη λειτουργία των refs και του hook useRef στην πράξη.