Hooken useRef giver mulighed for at oprette en variabel, der holder en reference til et element, en værdi eller andre data, som ikke påvirker komponentens rendering. Dette er nyttigt til at gemme mutable værdier, tilgå DOM-elementer eller bevare værdier på tværs af komponentens renders.

Syntaks:

For at anvende useRef hooken deklareres en variabel (refVariable), som tildeles resultatet af at kalde useRef(). Der kan valgfrit angives en initial værdi (initialValue) som argument til hooken.

const refVariable = useRef(initialValue);

Bemærk

Den aktuelle værdi kan tilgås og opdateres via egenskaben refVariable.current. Fordelen ved useRef er, at det muliggør manipulation af disse værdier uden at udløse en re-render af komponenten.

Eksempel:

Lad os oprette komponenten FormInput, som bruger useRef-hooken til at oprette en reference til et input-element og fokuserer på det, når en knap klikkes.

import React, { useRef } from "react";

const FormInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

I dette eksempel opretter useRef-hooken en reference kaldet inputRef. Denne reference tildeles til ref-attributten på input-elementet, hvilket gør det muligt at tilgå input-elementet via inputRef.current.

Linje for linje forklaring:

• Linje 1: Vi importerer useRef-hooken fra React-biblioteket for at udnytte dens funktionalitet;
• Linje 3: FormInput-komponenten defineres ved hjælp af den konventionelle funktionssyntaks;
• Linje 4: Vi initialiserer variablen inputRef med useRef-hooken, som repræsenterer input-referencen;
• Linje 6-8: Denne JavaScript arrow-funktion håndterer logikken for klik på knappen, hvilket fokuserer brugerens markør i inputfeltet;
• Linje 10-15: Komponentens markup bliver gengivet.
  1. På linje 12 sætter vi referencen ved hjælp af ref-attributten og tildeler variablen inputRef som dens værdi;
  2. Knapen på linje 13 bruger onClick-attributten til at angive den funktion, der skal udføres ved klik, hvilket i dette tilfælde er funktionen handleClick.

Fuld app-kode: