useRef-hookin avulla voidaan luoda muuttuja, joka säilyttää viittauksen elementtiin, arvoon tai muuhun tietoon, joka ei vaikuta komponentin renderöintiin. Tämä on hyödyllistä esimerkiksi muuttuvien arvojen tallentamiseen, DOM-elementtien käsittelyyn tai arvojen säilyttämiseen komponentin renderöintien välillä.

Syntaksi:

useRef-hookin käyttämiseksi määritellään muuttuja (refVariable) ja sille annetaan useRef()-funktion palauttama arvo. Halutessa voidaan antaa alkuarvo (initialValue) parametrina tälle hookille.

const refVariable = useRef(initialValue);

Huomio

Nykyinen arvo voidaan lukea ja päivittää refVariable.current -ominaisuuden kautta. useRef-hookin etuna on, että arvoja voidaan muokata ilman, että komponentti renderöityy uudelleen.

Esimerkki:

Luodaan FormInput-komponentti, joka käyttää useRef-hookia luodakseen viitteen syötekenttään ja kohdistaa siihen, kun painiketta klikataan.

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

Tässä esimerkissä useRef-hook luo viitteen nimeltä inputRef. Tämä viite liitetään ref-elementin input-attribuuttiin, jolloin pääsemme käsiksi input-elementtiin käyttämällä inputRef.current.

Rivikohtainen selitys:

• Rivi 1: Tuodaan useRef-hook React-kirjastosta sen toiminnallisuuden hyödyntämiseksi;
• Rivi 3: FormInput-komponentti määritellään tavanomaisella funktiosyntaksilla;
• Rivi 4: Alustetaan inputRef-muuttuja käyttämällä useRef-hookia, joka edustaa syötekentän viitettä;
• Rivillä 6-8: Tämä JavaScript-nuolifunktio käsittelee painikkeen klikkauslogiikan, joka kohdistaa käyttäjän kursorin syötekenttään;
• Rivillä 10-15: Komponentin merkkaus renderöidään.
  1. Rivillä 12 asetetaan viite käyttämällä ref-attribuuttia ja annetaan inputRef-muuttuja sen arvoksi;
  2. Painike rivillä 13 käyttää onClick-attribuuttia määrittääkseen suoritettavan funktion klikkauksen yhteydessä, tässä tapauksessa handleClick-funktion.

Koko sovelluksen koodi: