L'hook useRef consente di creare una variabile che mantiene un riferimento a un elemento, un valore o qualsiasi altro dato che non influisce sul rendering del componente. Questo può essere utile per memorizzare valori mutabili, accedere agli elementi del DOM o preservare valori tra i diversi render del componente.

Sintassi:

Per utilizzare l'hook useRef, si dichiara una variabile (refVariable) e le si assegna il risultato dell'invocazione di useRef(). Facoltativamente, è possibile fornire un valore iniziale (initialValue) come argomento di questo hook.

const refVariable = useRef(initialValue);

Nota

Il valore corrente può essere consultato e aggiornato tramite la proprietà refVariable.current. Il vantaggio di useRef è che permette di manipolare questi valori senza causare un nuovo rendering del componente.

Esempio:

Creiamo il componente FormInput che utilizza l'hook useRef per creare un riferimento a un elemento input e lo mette a fuoco quando si clicca un pulsante.

import React, { useRef } from "react";

const FormInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

In questo esempio, l'hook useRef crea un riferimento chiamato inputRef. Questo riferimento viene assegnato all'attributo ref dell'elemento input, permettendo di accedere all'elemento input tramite inputRef.current.

Spiegazione riga per riga:

• Riga 1: Si importa l'hook useRef dalla libreria React per sfruttarne la funzionalità;
• Riga 3: Il componente FormInput viene definito utilizzando la sintassi convenzionale della funzione;
• Riga 4: Si inizializza la variabile inputRef utilizzando l'hook useRef, che rappresenta il riferimento all'input;
• Riga 6-8: Questa funzione freccia JavaScript gestisce la logica del click sul pulsante, che mette a fuoco il campo di input per l'utente;
• Riga 10-15: Viene renderizzato il markup del componente.

1. Alla riga 12, si imposta il riferimento utilizzando l'attributo ref e si assegna la variabile inputRef come valore;
2. Il pulsante alla riga 13 utilizza l'attributo onClick per specificare la funzione da eseguire al click, che in questo caso è la funzione handleClick.

Codice completo dell'app: