Utilizzo dei React Ref e dell'hook useRef

React utilizza un approccio dichiarativo. Aggiorni lo stato e React aggiorna l'interfaccia utente (UI). Questo funziona per la maggior parte dei compiti.

Ma a volte è necessario uscire dal Virtual DOM. Potresti aver bisogno di interagire direttamente con un vero elemento HTML. È qui che entrano in gioco i Ref e l'hook useRef.

Cos'è un Ref? Un Ref è un puntatore. Collega React direttamente a un nodo DOM nativo.

Perché usare useRef invece di useState? Gli aggiornamenti dello stato innescano un re-render. Ciò significa che React ridisegna il componente sullo schermo. Gli aggiornamenti dei Ref non innescano un re-render. Questo li rende perfetti per valori che cambiano ma che non devono apparire immediatamente nell'interfaccia utente.

Casi d'uso comuni: • Mettere a fuoco automaticamente un campo di input. • Controllare elementi video o audio (play/pause). • Misurare la larghezza o l'altezza di un elemento. • Memorizzare gli ID dei timer per intervalli (intervals) o timeout.

Come usare useRef:

  1. Importa useRef da React.
  2. Inizializzalo: const myRef = useRef(null).
  3. Collegalo a un elemento: <input ref={myRef} />.
  4. Accedi al valore tramite: myRef.current.

Esempio 1: Auto-focus di un input Quando un utente entra in una pagina, vuoi che il cursore sia nella casella di testo. Usi useEffect per chiamare myRef.current.focus() dopo il montaggio del componente.

Esempio 2: Un cronometro Se memorizzi un ID di setInterval nello stato, il componente si aggiorna (re-render) ogni volta che il timer scatta. Questo è lento. Se memorizzi l'ID in un ref, il componente rimane veloce. Il valore rimane al sicuro tra i vari render senza causare lavoro extra al browser.

State vs Ref: • State: Innesca il re-render. Utilizzato per i dati dell'interfaccia utente. Gli aggiornamenti sono asincroni. • Ref: Nessun re-render. Utilizzato per l'accesso al DOM e per la memoria. Gli aggiornamenti sono sincroni.

Consigli professionali per Senior: • Evita l'uso eccessivo. Usa i ref solo quando la logica dichiarativa non è sufficiente. • Gestisci la memoria. Svuota sempre gli intervalli o i listener degli eventi nella tua funzione di cleanup. • Non scrivere nei ref durante il rendering. Aggiorna ref.current solo all'interno di useEffect o dei gestori di eventi (event handlers). Questo evita effetti collaterali (side effects). • Usa forwardRef. Se vuoi passare un ref a un componente figlio personalizzato, devi avvolgere quel figlio in React.forwardRef.

Fonte: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde