De useRef Hook voor het werken met refs in React

In deze les gaan we werken met refs. Voor de duidelijkheid laten we het werk van de hook useRef zien in vergelijking met de hook useState.

Laten we een component met een knop maken:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Importeren we useState in de component:

import { useState } from 'react';

En maken we een state state aan:

const [state, setState] = useState(0);

En laten we het zo maken dat bij een klik op de knop onze state met 1 wordt verhoogd. We geven de statewaarde weer in de tekst van de knop:

<button onClick={handleStateClick}>
	state click: {state}
</button>

Beschrijven we de functie voor het verwerken van de klik op de knop handleStateClick:

function handleStateClick() {
	setState(state + 1);
}

Laten we op de knop klikken en zien hoe de statewaarde groeit.

Laten we nu een component App maken, maar zonder state, met een ref.

Om te beginnen importeren we useRef in de component:

import { useRef } from 'react';

En maken we een ref ref aan. De hook useRef retourneert een ref-object met de enige eigenschap current, die voor ons verder interessant zal zijn. We stellen de beginwaarde in op 0:

const ref = useRef(0);

We hangen een klikhandler aan de knop. Onthoud dat we niet de ref zelf moeten lezen/wijzigen, maar de eigenschap current:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

We voegen de functie toe voor het verwerken van de klik op onze knop. Hier zullen we current met 1 verhogen, net als in het vorige voorbeeld met state. In tegenstelling tot state, waar een functie setState nodig is om de waarde te wijzigen, werken we direct met de eigenschap van de ref:

function handleRefClick() {
	ref.current = ref.current + 1;
}

Laten we nu op onze knop klikken. En wat zien we? Bij het klikken erop, blijft hij staan op 0 zoals in het begin, en verandert niet.

Je kunt natuurlijk gaan twijfelen of de waarde überhaupt verandert. Laten we dat controleren. Hiervoor voegen we in de functie van de klikhandler nog een regel code toe om de waarde van current naar de console te loggen:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

En nu, door de console in de browser te openen, kunnen we weer op de knop klikken en vaststellen dat de waarde inderdaad verandert bij elke klik en er geen misleiding is.

Nu zien we dat, in tegenstelling tot state, het wijzigen van de ref-waarde geen render van de component veroorzaakt. Daarom zien we elke keer in de knoptekst de beginwaarde 0.

Dus, als je gegevens worden gebruikt voor rendering, bewaar ze dan in state, en als je geen rendering nodig hebt, kan het gebruik van refs in dat geval efficiënter zijn.

Stel dat je in je component een alinea met de tekst 'text' en een knop hebt. Zorg ervoor dat elke keer bij een klik op de knop aan het einde van de alineatekst een uitroepteken wordt toegevoegd. Doe dit met state.

Maak een component App, maar gebruik in plaats van state nu een ref. Zorg dat je ziet dat bij het indrukken van de knop de tekst van de alinea niet verandert. Voeg ook een logging van de tekst van de alinea toe aan de console, open deze en zie, dat de tekst in werkelijkheid wel verandert.