Refs i React

Om vi vill komma ihåg viss information, men inte vill att dess förändring ska orsaka omrendering av komponenten, då kommer refs och motsvarande hooken useRef, som fungerar med dem, att vara användbara.

En ref (eller referens) är ett vanligt JavaScript- objekt med en enda egenskap current, som du kan läsa eller ändra.

Liksom states kan refs lagra vilken typ av data som helst - det kan vara siffror, strängar, objekt och till och med funktioner.

Om din data används för rendering, lagra den i state, och om du inte behöver rendering, i sådana fall kan användning av refs bli mer effektiv. Dessutom, till skillnad från state, ändras värdet på en ref omedelbart.

Överlag tillämpas refs där du behöver avvika från React och interagera med externa API:er - oftast med webbläsarrelaterade, som inte påverkar komponentens utseende. Det kan till exempel vara lagring av id för en timer eller lagring av ett objekt, för vilket det inte behövs beräkna JSX, men oftast är det interaktion med DOM-element. De kan användas för att hantera fokus, markera text eller spela upp media.

I nästa lektion kommer vi att gå igenom arbete med refs och hooken useRef i praktiken.