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...
kennisbank, Webontwikkeling, Digitale Marketing
Als je je software wilt optimaliseren, is de A/B test één van de beste manieren om dit aan te pakken. Meestal wordt deze test uitgevoerd op een website, maar het is ook mogelijk om dit voor software te doen.
Lees meerkennisbank, Webontwikkeling, Hosting, Symfony, React, JavaScript
Als je een app wilt laten bouwen voor een smartphone, krijg je te maken met de termen webapp en native app. Maar wat is het verschil nu precies? Het is één van de eerste vragen die je jezelf moet stellen, wil ik een webapp of een native app? Er is geen...
Lees meerSoftware modernisering, Webontwikkeling, B2B, Saas, Bedrijfssoftware, Digitale Marketing
Bij 4BIS Innovations zijn we verheugd om ons strategische partnerschap met MyChefsbase aan te kondigen, een toonaangevend restaurantmanagementplatform dat de manier waarop chefs en restaurant eigenaren recepten, menu's en operaties beheren, transformeert.
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!