Refs in React

Als we bepaalde informatie willen onthouden, maar niet willen dat een wijziging ervan een herrender van de component veroorzaakt, dan komen refs en dienovereenkomstig de hook useRef, die ermee werkt, van pas.

Een ref (of referentie) is een gewoon JavaScript- object met een enkele eigenschap current, die je kunt lezen of wijzigen.

Net als states kunnen refs elk gegevenstype opslaan - dit kunnen getallen, strings, objecten en zelfs functies zijn.

Als je gegevens worden gebruikt voor het renderen, bewaar ze dan in een state, en als je geen herrender nodig hebt, dan kan het gebruik van refs efficiënter zijn. Bovendien verandert, in tegenstelling tot state, de waarde van een ref onmiddellijk.

Over het algemeen worden refs toegepast waar je moet afwijken van React en moet communiceren met externe API's - vaker met browser-API's, die geen invloed hebben op de weergave van de component. Dit kan bijvoorbeeld het opslaan van een timer-id zijn of het opslaan van een object waarvoor geen JSX berekend hoeft te worden, maar meestal is het communicatie met DOM-elementen. Ze kunnen worden gebruikt voor het beheren van focus, het selecteren van tekst of het afspelen van media.

In de volgende les behandelen we het werken met refs en de hook useRef in de praktijk.