Το Hook useRef για εργασία με refs στο React

Σε αυτό το μάθημα θα δουλέψουμε με refs. Για καλύτερη κατανόηση ας αναλύσουμε τη λειτουργία του hook useRef σε σύγκριση με το hook useState.

Ας δημιουργήσουμε ένα component με ένα κουμπί:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Ας εισάγουμε στο component το useState:

import { useState } from 'react';

Και ας δημιουργήσουμε state state:

const [state, setState] = useState(0);

Τώρα ας κάνουμε έτσι ώστε με κάθε κλικ στο κουμπί το state να αυξάνεται κατά 1. Η τιμή του state θα εμφανίζεται απευθείας στο κείμενο του κουμπιού:

<button onClick={handleStateClick}>
	state click: {state}
</button>

Ας περιγράψουμε τη συνάρτηση για την επεξεργασία του κλικ στο κουμπί handleStateClick:

function handleStateClick() {
	setState(state + 1);
}

Ας πατήσουμε το κουμπί και θα δούμε πώς μεγαλώνει η τιμή του state.

Τώρα ας δημιουργήσουμε το component App, αλλά χρησιμοποιώντας όχι state, αλλά ref.

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

import { useRef } from 'react';

Και ας δημιουργήσουμε ref ref. Με το αποτέλεσμά του το hook useRef επιστρέφει ένα αντικείμενο ref με μία μόνο ιδιότητα current, που θα μας ενδιαφέρει στο μέλλον. Ας ορίσουμε την αρχική του τιμή σε 0:

const ref = useRef(0);

Ας βάλουμε στο κουμπί τον χειριστή κλικ. Θυμηθείτε ότι πρέπει να διαβάζουμε/αλλάζουμε όχι το ίδιο το ref, αλλά την ιδιότητα του current:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

Ας προσθέσουμε τη συνάρτηση για την επεξεργασία του κλικ στο κουμπί μας. Εδώ θα αυξάνουμε το current κατά 1, όπως και στο προηγούμενο παράδειγμα με το state. Σε αντίθεση με το state, όπου απαιτείται συνάρτηση setState για αλλαγή της τιμής του, με την ιδιότητα του ref δουλεύουμε απευθείας:

function handleRefClick() {
	ref.current = ref.current + 1;
}

Τώρα ας πατήσουμε το κουμπί μας. Και τι βλέπουμε; Με το κλικ πάνω του, όπως είχαμε αρχικά 0, έτσι παραμένει και δεν αλλάζει.

Φυσικά, μπορείτε να αρχίσετε να αμφιβάλλετε αν η τιμή αλλάζει καθόλου. Ας το ελέγξουμε. Για αυτό στη συνάρτηση χειριστή κλικ ας προσθέσουμε ακόμη μία γραμμή κώδικα με έξοδο της τιμής current στην κονσόλα:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

Τώρα, ανοίγοντας την κονσόλα στο πρόγραμμα περιήγησης, ας πατήσουμε ξανά το κουμπί και θα βεβαιωθούμε ότι η τιμή πράγματι αλλάζει με κάθε κλικ και δεν υπάρχει καμία απάτη.

Τώρα βλέπουμε ότι σε αντίθεση με το state, η αλλαγή της τιμής του ref δεν προκαλεί render του component. Γι' αυτό βλέπουμε κάθε φορά στο κείμενο του κουμπιού την αρχική τιμή 0.

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

Ας υπάρχει στο component σας μια παράγραφος με κείμενο 'text' και ένα κουμπί. Κάντε έτσι ώστε κάθε φορά που γίνεται κλικ στο κουμπί στο τέλος του κειμένου της παραγράφου να προστίθεται ένα θαυμαστικό. Κάντε αυτό χρησιμοποιώντας state.

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