De useRef-hook maakt het mogelijk om een variabele te creëren die een referentie bevat naar een element, een waarde of andere gegevens die geen invloed hebben op het renderen van de component. Dit is nuttig voor het opslaan van veranderlijke waarden, het benaderen van DOM-elementen of het behouden van waarden gedurende meerdere renders van de component.

Syntax:

Om de useRef-hook te gebruiken, wordt een variabele (refVariable) gedeclareerd en het resultaat van het aanroepen van useRef() eraan toegekend. Optioneel kan een initiële waarde (initialValue) als argument aan deze hook worden meegegeven.

const refVariable = useRef(initialValue);

Opmerking

De huidige waarde kan worden benaderd en bijgewerkt via de eigenschap refVariable.current. Het voordeel van useRef is dat deze waarden kunnen worden aangepast zonder dat de component opnieuw wordt gerenderd.

Voorbeeld:

Hier maken we de FormInput-component die de useRef-hook gebruikt om een referentie naar een inputelement te creëren en deze te focussen wanneer op een knop wordt geklikt.

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>
  );
};

In dit voorbeeld maakt de useRef-hook een referentie genaamd inputRef. Deze referentie wordt toegewezen aan het ref-attribuut van het input-element, waardoor we toegang krijgen tot het input-element via inputRef.current.

Regel-voor-regel uitleg:

• Regel 1: Importeren van de useRef-hook uit de React-bibliotheek om de functionaliteit te benutten;
• Regel 3: De FormInput-component wordt gedefinieerd met de conventionele functiesyntaxis;
• Regel 4: Initialiseren van de variabele inputRef met de useRef-hook, die de inputreferentie voorstelt;
• Regels 6-8: Deze JavaScript arrow-functie behandelt de logica voor het klikken op de knop, waardoor de cursor van de gebruiker op het invoerveld wordt geplaatst;
• Regels 10-15: De markup van de component wordt gerenderd.
  1. Op regel 12 stellen we de referentie in met het ref-attribuut en wijzen we de variabele inputRef toe als waarde;
  2. De knop op regel 13 gebruikt het onClick-attribuut om de functie te specificeren die moet worden uitgevoerd bij een klik, in dit geval de handleClick-functie.

Volledige app-code: