Refs i React

Hvis vi ønsker å huske en informasjon, men ikke vil at endringen av den skal utløse gjenrendering av komponenten, så kommer refs og tilsvarende hooken useRef, som fungerer med dem, til nytte.

En ref (eller referanse) er en vanlig JavaScript- objekt med en enkelt egenskap current, som du kan lese eller endre.

I likhet med states, kan refs lagre alle typer data - det kan være tall, strenger, objekter og til og med funksjoner.

Hvis dataene dine brukes til gjenrendering, så lagre dem i state, og hvis du ikke trenger gjenrendering, i så fall kan bruk av refs være mer effektivt. Dessuten, i motsetning til state, endres verdien til en ref umiddelbart.

Generelt brukes refs der du må avvike fra React og samhandle med eksterne API-er - oftest med nettleser-API-er, som ikke påvirker visningen av komponenten. Dette kan for eksempel være lagring av id til en timer eller lagring av et objekt, for which det ikke er nødvendig å beregne JSX, men oftest er det samhandling med DOM-elementer. De kan brukes til å håndtere fokus, tekstutvalg eller avspilling av media.

I neste leksjon vil vi gå gjennom arbeid med refs og hooken useRef i praksis.