Refs i React

Hvis vi vil huske en eller anden information, men ikke ønsker, at dens ændring skal udløse en genrendering af komponenten, så kan vi bruge refs og tilsvarende hooket useRef, som arbejder med dem.

En ref (eller reference) er et almindeligt JavaScript- objekt med en enkelt egenskab current, som du kan læse eller ændre.

Ligesom state kan refs gemme enhver datatype - det kan være tal, strenge, objekter og endda funktioner.

Hvis dine data bruges til genrendering, så gem dem i state, og hvis du ikke har brug for genrendering, kan brugen af refs i sådanne tilfælde være mere effektiv. Derudover ændres værdien af en ref øjeblikkeligt, i modsætning til state.

Generelt anvendes refs der, hvor du er nødt til at træde væk fra React og interagere med eksterne API'er - oftest browser-API'er, som ikke påvirker komponentens visning. Det kan for eksempel være opbevaring af id for en timer eller opbevaring af et objekt, som ikke har brug for at beregne JSX, men mest af alt er det interaktion med DOM-elementer. De kan bruges til at håndtere fokus, tekstmarkering eller afspilning af medier.

I den næste lektion vil vi gennemgå arbejdet med refs og hooket useRef i praksis.