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

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.

• React Hooks Deel 1 State & Effect: Vereenvoudig je React Components
• Mastering React Hooks: Het Ontketenen van de Kracht van useContext en useReducer React Hooks Deel 2
• Optimaliseer je React App met useCallback en useMemo: React Hooks serie deel 4

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!