Hook useRef per lavorare con i ref in React

In questa lezione lavoreremo con i ref. Per chiarezza, analizziamo il funzionamento dell'hook useRef confrontandolo con l'hook useState.

Creiamo un componente con un pulsante:

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

Importiamo useState nel componente:

import { useState } from 'react';

E creiamo lo state state:

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

Ora facciamo in modo che al click del pulsante il nostro state aumenti di 1. Visualizzeremo il valore dello state direttamente nel testo del pulsante:

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

Descriviamo la funzione per gestire il click sul pulsante handleStateClick:

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

Clicchiamo più volte il pulsante e vedremo come il valore dello state aumenta.

Ora creiamo il componente App, ma utilizzando non lo state, ma un ref.

Per iniziare, importiamo nel componente useRef:

import { useRef } from 'react';

E creiamo il ref ref. L'hook useRef restituisce come risultato un oggetto ref con un'unica proprietà current, che sarà quella che ci interesserà in seguito. Impostiamo il suo valore iniziale a 0:

const ref = useRef(0);

Aggiungiamo al pulsante il gestore del click. Ricorda che dobbiamo leggere/modificare non il ref stesso, ma la sua proprietà current:

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

Aggiungiamo la funzione per gestire il click sul nostro pulsante. Qui aumenteremo current di 1, come nell'esempio precedente con lo state. A differenza dello state, dove è richiesta la funzione setState per modificare il suo valore, con la proprietà del ref lavoriamo direttamente:

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

Ora clicchiamo il nostro pulsante. E cosa vediamo? Al click su di esso, il valore rimane 0 come inizialmente, e non cambia.

Potreste ovviamente iniziare a dubitare che il valore cambi effettivamente. Controlliamolo. Per farlo, aggiungiamo un'altra riga di codice nella funzione del gestore del click per visualizzare il valore di current in console:

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

Ora, aprendo la console nel browser, clicchiamo di nuovo sul pulsante e verifichiamo che il valore cambi effettivamente ad ogni click e che non ci siano inganni.

Ora vediamo che, a differenza dello state, la modifica del valore del ref non causa il rendering del componente. Pertanto ogni volta nel testo del pulsante vediamo il valore iniziale 0.

Pertanto, se i vostri dati sono utilizzati per il rendering, conservateli nello state, mentre se non avete bisogno del rendering, in tal caso l'utilizzo dei ref può risultare più efficiente.

Supponiamo che nel tuo componente ci sia un paragrafo con il testo 'text' e un pulsante. Fai in modo che ogni volta che si clicca sul pulsante alla fine del testo del paragrafo venga aggiunto un punto esclamativo. Fallo utilizzando lo state.

Crea un componente App, ma invece dello state usa ora un ref. Verifica che alla pressione del pulsante il testo del paragrafo non cambi. Aggiungi anche l'output del testo del paragrafo in console, aprila e verifica che in realtà il testo stia cambiando.