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.
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.
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.