Hooken useRef lar oss opprette en variabel som holder en referanse til et element, en verdi eller annen data som ikke påvirker rendringen av komponenten. Dette er nyttig for å lagre mutable verdier, få tilgang til DOM-elementer eller bevare verdier på tvers av komponentrendringer.

Syntaks:

For å bruke hooken useRef, deklarerer vi en variabel (refVariable) og tildeler resultatet av å kalle useRef() til den. Valgfritt kan vi gi en initialverdi (initialValue) som argument til denne hooken.

const refVariable = useRef(initialValue);

Merk

Gjeldende verdi kan nås og oppdateres ved å bruke egenskapen refVariable.current. Fordelen med useRef er at vi kan manipulere disse verdiene uten å utløse en ny rendring av komponenten.

Eksempel:

La oss lage komponenten FormInput som bruker useRef-hooken for å opprette en referanse til et input-element og fokuserer på det når en knapp trykkes.

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 eksempelet oppretter useRef-hooken en referanse kalt inputRef. Denne referansen tildeles ref-attributtet til input-elementet, slik at vi kan få tilgang til input-elementet ved å bruke inputRef.current.

Linje for linje-forklaring:

• Linje 1: Vi importerer useRef-hooken fra React-biblioteket for å benytte dens funksjonalitet;
• Linje 3: FormInput-komponenten defineres ved bruk av konvensjonell funksjonssyntaks;
• Linje 4: Vi initialiserer variabelen inputRef ved hjelp av useRef-hooken, som representerer input-referansen;
• Linje 6-8: Denne JavaScript arrow-funksjonen håndterer logikken for å trykke på knappen, som fokuserer brukerens markør i input-feltet;
• Linje 10-15: Komponentens markup rendres.
  1. På linje 12 setter vi referansen ved å bruke ref-attributtet og tildeler variabelen inputRef som verdi;
  2. Knappen på linje 13 benytter onClick-attributtet for å spesifisere funksjonen som skal kjøres ved klikk, som i dette tilfellet er funksjonen handleClick.

Full app-kode: