Beheersen van React Hooks Serie - Onthulling van de Kracht van useRef (Deel 3)

kennisbank, React

Gepubliceerd: 31.01.2024

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.

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

Toegang tot DOM-elementen:

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;

Waarden Behouden Tussen Herrenderingen:

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;

Conclusie:

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!

Lees hier onze blogs!

Breid je kennis uit met de 4BIS Blog...

WordPress en Plugins – Een wereld die voor je open gaat!

WordPress, 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

Onthulling van Tech-Nieuws.nl: Waar Innovatie Samenkomt met Vindingrijkheid

SEO / SEA, Software-modernisering, Webontwikkeling, PHP, Symfony, Digitale Marketing

In het bruisende rijk van technologie is up-to-date blijven niet alleen een noodzaak maar een levensstijl geworden. Met een overvloed aan informatie die ons dagelijks overspoelt, wordt een betrouwbare bron om het laatste technieuws te selecteren en te...

Lees meer

HR software: Zo automatiseer je Human Resource Management

Bedrijfssoftware, Software-modernisering, Webontwikkeling, Automatisering

HRM, ook wel Human Resource Management, is een belangrijk onderdeel voor ieder bedrijf. Vooral als je veel werknemers hebt, is een HR afdeling niet te missen. Het is echter niet nodig om een enorme HR afdeling te hebben. Veel is te automatiseren door...

Lees meer

En wat kunnen we voor jou betekenen?_

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!

back to top