Ref in React

Se vogliamo memorizzare alcune informazioni, ma non vogliamo che la loro modifica causi il rendering del componente, allora ci saranno utili i ref e di conseguenza l'hook useRef, che funziona con essi.

Un ref (o riferimento) è un normale oggetto JavaScript con un'unica proprietà current, che puoi leggere o modificare.

Come gli stati, i ref possono memorizzare qualsiasi tipo di dati - possono essere numeri, stringhe, oggetti e persino funzioni.

Se i tuoi dati vengono utilizzati per il rendering, allora conservali nello stato, mentre se non hai bisogno del rendering, in tal caso l'uso dei ref può rivelarsi più efficiente. Inoltre, a differenza dello stato, il valore del ref cambia immediatamente.

In generale, i ref vengono applicati laddove è necessario allontanarsi da React e interagire con API esterne - più spesso con quelle del browser, che non influiscono sulla visualizzazione del componente. Questo potrebbe essere ad esempio memorizzare l'id di un timer o memorizzare un oggetto per cui non è necessario calcolare JSX, ma molto spesso si tratta di interazione con elementi DOM. Possono essere utilizzati per gestire lo focus, selezionare il testo o riprodurre contenuti multimediali.

Nella prossima lezione analizzeremo il lavoro con i ref e l'hook useRef nella pratica.