Welkom terug bij het derde deel van onze React Hooks serie! In de vorige blogposts doken we in de fascinerende wereld van hooks, waarbij we hun betekenis verkenden en essentiële hooks bespraken zoals useState
, useEffect
, useContext
en useReducer
. Deze hooks stellen ons in staat om de functionaliteit van op klassen gebaseerde componenten te repliceren in functionele componenten en een vereenvoudigde Redux store te creëren. In de komende artikelen zullen we dieper ingaan op Redux. Maar voor nu richten we ons op de useRef
hook.
useRef
:De useRef
hook is een krachtig hulpmiddel dat ons toegang geeft tot DOM-nodes en ons in staat stelt gegevens te behouden tussen herrenderingen. In deze blogpost zullen we verkennen hoe we useRef
kunnen gebruiken voor verschillende scenario's.
Een primaire toepassing van useRef
is het verkrijgen van toegang tot DOM-elementen. Laten we een voorbeeld bekijken waarbij we useRef
gebruiken op een invoerelement om erop te focussen na een klikgebeurtenis. Daarnaast gebruiken we de .current
-eigenschap om de waarde van de invoer te behouden. Hier is een voorbeeld van hoe dit geïmplementeerd kan worden:
import React, { useRef } from 'react';
const RefFunctionComponent = () => {
const besteEredivisieClub = useRef('Ajax');
const focusRef = () => {
besteEredivisieClub.current.focus();
};
return (
<div>
<input
ref={besteEredivisieClub}
type="text"
value={besteEredivisieClub.current}
/>
<button onClick={focusRef}>Focus op het ref-object</button>
</div>
);
};
export default RefFunctionComponent;
In tegenstelling tot de createRef
API, die telkens na een herrendering een nieuwe waarde oplevert, behoudt useRef
zijn waarde gedurende opeenvolgende herrenderingen. In het volgende voorbeeld vergelijken we het gedrag van createRef
en useRef
wanneer waarden worden gewijzigd na een specifiek tijdsinterval:
import React, { useRef, useState, createRef, useEffect } from 'react';
const RefFunctionComponent = () => {
const [herrenders, setHerrenders] = useState(1);
const useRefHook = useRef('Ajax');
const createRefAPI = createRef();
createRefAPI.current = 'Ajax';
useEffect(() => {
setTimeout(() => {
useRefHook.current = 'PSV';
createRefAPI.current = 'PSV';
console.log(useRefHook, createRefAPI);
}, 5000);
}, []);
return (
<>
<p>Aantal keer herrenderd: {herrenders}</p>
<p>
<b>useRef</b> Wat is de slechtste club: {useRefHook.current}
</p>
<p>
<b>CreateRef</b> Wat is de beste club:{createRefAPI.current}
</p>
<button onClick={() => setHerrenders((v) => v + 1)}>
Veroorzaak herrendering
</button>
</>
);
};
export default RefFunctionComponent;
Zoals gedemonstreerd, is de useRef
hook een waardevolle toevoeging aan je React toolkit, die naadloze toegang biedt tot DOM-elementen en het behoud van waarden tussen herrenderingen mogelijk maakt. Blijf op de hoogte voor ons volgende blogartikel, waarin we useMemo
en useCallback
zullen verkennen. Als je hulp nodig hebt bij je React-project, staan onze professionals altijd klaar om te helpen.
Voor professionele ondersteuning bij React-ontwikkeling kun je altijd contact met ons opnemen!
Ook interessant
Breid je kennis uit met de 4BIS Blog...
Webontwikkeling, Software modernisering, Ecommerce / Webshop, Bedrijfssoftware, PHP, MySQL, HTML & CSS
Ontdek 5 essentiële tips om de juiste software ontwikkelaar te vinden, van prijs-kwaliteitverhouding tot locatie en ervaring. Lees onze handige gids!
Lees meerAutomatisering, Webontwikkeling, Software modernisering, Bedrijfssoftware, kennisbank
Ontdek hoe automatisering van uw software en processen uw bedrijf kan verbeteren. Leer over de voordelen van automatisering en hoe het uw bedrijfsvoering efficiënter kan maken. Neem contact met ons op voor op maat gemaakte automatiseringsoplossingen.
Lees meerAutomatisering, Webontwikkeling, Software modernisering, kennisbank, WordPress, WooCommerce
Leer hoe u het backendgedrag op een WordPress-website voor mobiele apparaten kunt wijzigen met de deskundige gids van 4BIS Innovatives. Ontdek tips over het optimaliseren van de prestaties van uw WordPress-site door backendinstellingen specifiek aan...
Lees meer Wil je meer weten of heb je interesse? Neem dan gerust direct contact met ons op, per telefoon of via de mail.
Of maak gebruik van één van onze contactformulieren zodat we je zo snel en gepast mogelijk antwoord kunnen geven. We horen graag van je!