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...
Software-modernisering, kennisbank, React, Bedrijfssoftware
Veel mensen komen widgets tegen, maar deze zijn niet altijd duidelijk. Zoveel mensen vragen zich af: wat is een widget? Wat een widget precies is leggen wij in deze blog uit.
Lees meerDe WP admin error 500 in Wordpress komt bijzonder vaak voor. De Internal Server Error met statuscode HTTP error 500 is minder makkelijk op te lossen dan andere errors, waarbij de oplossing vaak voor de hand ligt. De HTTP error 500 kan veroorzaakt worden...
Lees meerWordPress, Webontwikkeling, Ecommerce / Webshop, kennisbank, WooCommerce
Met plugins kan je functionaliteit van wordpress uitbreiden of geheel nieuwe functies aan wordpress toevoegen. Plugins kan je zelf maken, mits je verstand hebt van php, of je kan ze downloaden.
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!