In React zijn hooks speciale functies waarmee developers de state en andere functies van React kunnen gebruiken zonder dat er klassecomponenten nodig zijn. Onder deze hooks valt vooral de useRef hook op als een waardevolle tool voor het beheren van waarden en het accessen van Document Object Model (DOM) elementen.

De useRef hook is een krachtig hulpmiddel dat enorme flexibiliteit en mogelijkheden biedt, maar developers begrijpen het vaak niet goed en gebruiken het vaak verkeerd.

In dit artikel gaan we diep in op de useRef hook en leggen we het doel, de functionaliteit en de best practices uit. Aan het einde van deze gids zul je begrijpen waar deze hook om draait en waardevolle inzichten krijgen in hoe je het volledige potentieel effectief kunt benutten.

Wat is de useRef hook?

De useRef hook dient twee hoofddoelen: het opslaan van muteerbare waarden die geen re-render veroorzaken wanneer ze worden bijgewerkt en het opslaan van verwijzingen naar DOM elementen. Laten we eens in detail kijken hoe het werkt.

Wanneer een component wordt gerenderd in React, worden de state en andere variabelen meestal gereset. Er zijn echter gevallen waarin je bepaalde waarden moet behouden, zelfs als het component opnieuw rendert. Dit is waar de useRef hook om de hoek komt kijken. Hiermee kun je een verwijzing (reference) maken naar een waarde die blijft bestaan tussen renders, zodat de waarde intact blijft, zelfs als andere delen van het component veranderen.

Daarnaast is de useRef hook belangrijk bij het werken met DOM elementen. In React kan het een uitdaging zijn om DOM elementen rechtstreeks te openen en te wijzigen, vooral zonder de useRef hook. Met useRef kun je een verwijzing krijgen naar een specifiek DOM element en er bewerkingen op uitvoeren. Hierdoor heb je geen externe bibliotheken of ingewikkelde workarounds nodig.

useRef gebruiken in React

Om te beginnen met het gebruik van de useRef hook in je React project, importeer je deze uit het React pakket:

import { useRef } from 'react';

Eenmaal geïmporteerd kun je een ref variabele declaren in je functionele component met behulp van de useRef hook:

const myRef = useRef();

Nu heb je een ref object, myRef, dat je kunt gebruiken om waarden op te slaan en te accessen. Om de myRef variabele met een element te gebruiken, wijs je hem toe aan de ref prop van het element.

<div ref={myRef}>This is an example element</div>

In het bovenstaande voorbeeld wijs je het div element een ref prop toe. Hierdoor kun je verwijzen naar en toegang krijgen tot het element met behulp van de myRef variabele elders in het component.

Om toegang te krijgen tot de waarde die is opgeslagen in de aangemaakte reference, kun je de property .current van het object myRef gebruiken.

const myRefValue = myRef.current;
console.log(myRefValue); // <div>This is a sample div</div>

DOM manipulatie met de useRef hook

Het manipuleren van de DOM is een veelvoorkomende taak bij webontwikkeling omdat je hiermee de inhoud, structuur en het uiterlijk van een webpagina dynamisch kunt veranderen en bijwerken.

In traditionele JavaScript development moest je voor het openen en manipuleren van DOM elementen de methoden als getElementById, querySelector of getElementsByClassName gebruiken om specifieke elementen uit het document te selecteren. Eenmaal geselecteerd kon je inhoud bijwerken, stijlen wijzigen of event listeners toevoegen.

// HTML
<div>
  <input type="text" id="myInput" />
  <button id="focusButton">Focus Input</button>
</div>
// JavaScript
<script>
      const inputRef = document.getElementById('myInput');
      const focusButton = document.getElementById('focusButton');
      const handleFocus = function() {
        inputRef.focus();
      };
      focusButton.addEventListener('click', handleFocus);
</script>

Bij het werken met DOM elementen in een React component is het proces echter niet hetzelfde vanwege de virtuele DOM van de component en de noodzaak om updates efficiënt te beheren. Developers namen vaak hun toevlucht tot verschillende benaderingen, zoals het gebruik van refs of externe bibliotheken zoals jQuery, om toegang te krijgen tot DOM elementen en deze te manipuleren.

Met de introductie van de useRef hook in React is het werken met DOM elementen binnen componenten aanzienlijk gestroomlijnd. De useRef hook biedt een eenvoudige manier om een verwijzing naar een DOM element te maken, waardoor het eenvoudig toegankelijk en manipuleerbaar is binnen de context van het component.

import { useRef } from 'react';

const FocusComponent = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    // accessing the input element
    let inputElement = inputRef.current;

   // modify the DOM element
   inputElement.focus();
  };
 
 return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

In dit voorbeeld wordt de useRef hook gebruikt om een verwijzing inputRef te maken die wijst naar het input element. Als er op de knop “Focus Input” wordt geklikt, gebruikt de functie handleFocus inputRef.current.focus() om de focus direct op het input-element te zetten. Dit laat zien hoe de useRef hook het werken met DOM elementen in React vereenvoudigt.

Een ander voorbeeld is dat je een div wilt manipuleren door de achtergrond te veranderen wanneer er op een knop wordt geklikt:

import { useRef } from 'react';

const ExampleComponent = () => {
  const divRef = useRef();

  const handleClick = () => {
    divRef.current.style.backgroundColor = 'red';
  };

  return (
    <div>
      <div ref={divRef}>This is a sample div</div>
      <button onClick={handleClick}>Change Color</button>
    </div>
  );
}

In dit voorbeeld maak je een reference aan met de useRef hook genaamd divRef. Je wijst deze rerence toe aan de ref prop van het div element.

Wanneer er op de knop “Change Color” wordt geklikt, wordt de functie handleClick gecalld. In de functie heb je toegang tot het div element met divRef.current. In dit geval wijzig je de achtergrondkleur van het div element door de style.backgroundColor property te updaten naar ‘red’.

divRef.current.style.backgroundColor = 'red';

Waarden behouden bij opnieuw renderen

Het bewaren van waarden tussen re-renders is een krachtig gebruik van de useRef hook. Het is vooral handig als je waarden hebt die moeten blijven bestaan gedurende de levenscyclus van het component zonder dat ze opnieuw worden gerenderd.

Om dit concept beter te begrijpen, vergelijken we de useRef hook met de useState hook aan de hand van praktijkvoorbeelden:

Voorbeeld met useState hook:

import { useState } from 'react';

function CounterComponent() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In dit voorbeeld gebruik je de useState hook om de count state variabele te beheren. Telkens wanneer de increment functie wordt gecalld, wordt de count state bijgewerkt met setCount. Dit zorgt ervoor dat het component opnieuw wordt weergegeven met de bijgewerkte count waarde.

Pagina re-rendert met de useState hook
Pagina re-rendert met de useState hook

Voorbeeld met useRef hook:

import React, { useRef } from 'react';

function CounterComponent() {
  const countRef = useRef(0);

  const increment = () => {
    countRef.current = countRef.current + 1;
    console.log('Count:', countRef.current);
  };

  return (
    <div>
      <p>Count: {countRef.current}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In dit voorbeeld gebruik je de useRef hook om een countRef variabele te maken, geïnitialiseerd met een initiële waarde van 0. Wanneer de increment functie wordt gecalld, werk je direct de countRef.current waarde bij zonder een re-render te starten. De bijgewerkte waarde wordt gelogd op de console.

Pagina re-rendert niet met de useRef Hook
Pagina re-rendert niet met de useRef Hook

Door de useRef hook te gebruiken, wordt het component niet opnieuw gerenderd wanneer de waarde countRef.current verandert. Dit kan voordelig zijn in scenario’s waar je waarden hebt die moeten worden gewijzigd, maar die het renderproces niet beïnvloeden.

Merk op dat wanneer je de useRef hook op deze manier gebruikt, wijzigingen in de ref waarde niet automatisch leiden tot re-renders. Als je de bijgewerkte waarde moet weergeven in de UI, kun je de update handmatig uitvoeren of de useRef hook combineren met andere hooks of state variabelen om het gewenste gedrag te bereiken.

Samenvatting

In dit artikel heb je de useRef hook in React onderzocht en het doel, de implementatie en praktische toepassingen ervan leren kennen. Je hebt geleerd hoe je useRef kunt gebruiken voor het openen en wijzigen van DOM elementen en het behouden van waarden.

Een best practice voor het gebruik van de useRef hook is om het niet te veel te gebruiken. Gebruik hem wanneer je specifiek DOM elementen moet accessen en manipuleren of waarden moet bewaren bij het opnieuw renderen.

De useRef hook kan ook worden gebruikt voor verschillende praktische scenario’s zoals animaties en overgangen, caching van waarden of tussenresultaten en nog veel meer waardoor je React applicatie opvalt.

Bouw je volgende React applicatie en deploy deze gratis op Kinsta’s  Applicatie Hosting zodat je er live toegang toe hebt en het kunt delen met de wereld!

Nu is het jouw beurt. Wat is jouw mening over de useRef hook? Deel het gerust met ons in de comments hieronder.