De trilogie – React Hooks deel 3 – useRef

Deel 3 al van de React Hooks serie! Deze week bespreken we de useRef hook. Een hele nuttige hook die ervoor zorgt dat we toegang kunnen krijgen tot DOM nodes of dat we data gedurende rerenders kunnen bewaren. Lees snel verder hoe je deze hook kan gebruiken.
updated: Feb 18, 2021 at 10:25AM | published: Feb 12, 2021
Het 3e deel van de React Hooks serie. In de vorige blog posts hebben we de wondere wereld van hooks geintroduceerd. Hierin hebben we uitgelegd wat zijn hooks en waarom zijn ze zo nuttig. Ook hebben we de belangrijkste hooks besproken namelijk de useState, useEffect, useContext en useReducer. Met de eerste 2 kunnen we bijna alle functionaliteit van een class based component in een functional component plaatsen. En met de laatse kunnen we een soort van Redux store maken zonder de extra ingewikkeldheid die Redux met zich mee brengt. Volgende week zal ik wat meer vertellen over Redux.
Deze week ga ik vertellen over de useRef hook een hele handige hook die ervoor kan zorgen dat je toegang kan krijgen tot DOM nodes en dat je waardes kan bewaren tijdens rerenders. Oorspronkelijk wilde ik ook nog gaan vertellen over useMemo en useCallback. Maar daar heb ik helaas geen tijd meer voor dus die komen in het volgende blog artikel over hooks

useRef

Met de useRef hook kunnen we makkelijk toegang krijgen tot het DOM, useRef geeft een muteerbaar object terug wiens .current property de geinitialiseerde waarde bevat. Deze waarde zal bewaard blijven zolang het react element bestaat.

JS

import React, { useRef } from ‘react’;

const besteEredivisieClub = useRef(‘Ajax’);

Als we dan vervolgens gaan kijken wat er in de const besteEredivisieClub zit krijgen we een object terug dat er zo uit ziet { current: “Ajax” }. Er zijn 2 hoofdredenen om useRef te gebruiken
– Je wilt toegang hebben tot een DOM element

in onderstaand voorbeeld gebruiken we useRef op onze input zodat we na het click event kunnen focussen op de input. Ook gebruiken we .current om de waarde van input vast te zetten. Met deze manier om DOM elementen aan

JS

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}
        />
       &nbsp    <button onClick={focusRef}>Focus on the ref object</button>
    </div>
    );
};

export default RefFunctionComponent

 

– Je wilt een waarde bewaren gedurende opeenvolgende rerenders

Dit is het grote verschil met de createRef API createRef zal na elke rerender een nieuwe waarde terug geven. Als we in onderstaand voorbeeld kijken creëren we 1 ref met de createRef API en een met de Hooks api en we geven ze beiden een initiële waarde van Ajax. Dan in onze useEffect hook veranderen we na 5 seconde beide waardes naar PSV we zien dat dat ook lukt als we in onze console kijken. Als we dan op rerender klikken dan zien we dat degene die gemaakt is met useRef zijn waarde heeft behouden en dat de waarde van createRef de originele waarde heeft. De useRef hook zal gedurende rerenders zijn waarde behouden totdat je hem aanpast met createdUseRef.current = ‘nieuwe waarde’;

JS

import React, { useRef, useState, createRef, useEffect } from ‘react’;

const RefFunctionComponent = () => {

      const [rerender, setRerender] = 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 gererendered: {rerender}</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={() => setRerender(v => v + 1)}>
            Cause re-render
      </button>
      </>
      )
}

export default RefFunctionComponent

Zoals je kan lezen kan useRef een uitstekende uitbreiding zijn op je react kennis. Heb je nou hulp nodig met een react project onze professionals staan altijd voor je klaar.

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer
Redux de Intro!

Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!