Waarden bewaren zonder opnieuw te renderen

Doel: Sla waarden op die opnieuw renderen overleven zonder een nieuwe render te veroorzaken. useRef geeft je een stabiel vak .current.

• Blijft behouden bij opnieuw renderen
• Geen opnieuw renderen bij wijzigingen
• Handig voor timers en vorige waarden

Updates met useState renderen de gebruikersinterface opnieuw. Updates met useRef doen dat niet. Kies een ref voor veranderlijke hulpwaarden (id's en tellers voor logica), niet voor gegevens in de gebruikersinterface.

We verhogen in een effect een renderCount en bewaren die in een ref. De waarde overleeft nieuwe renders, maar veroorzaakt ze niet.

Goede toepassingen:

• ID's van timers en intervallen
• Caches met vorige waarden
• Vlaggen tussen renders (bijvoorbeeld isMounted)

Niet voor: gegevens die in de gebruikersinterface moeten verschijnen.

Bewaar het interval-ID in een ref, zodat je de timer kunt starten en stoppen zonder extra renders.

Valkuilen:

• Lees een ref niet uit om de gebruikersinterface aan te sturen zonder status; de gebruikersinterface wordt dan niet bijgewerkt.
• Reset refs bij het ontkoppelen als ze ID's of resources bevatten.
• Gebruik refs niet te veel als globale verzamelbakken.

Samenvatting: Gebruik useRef voor veranderlijke waarden die tussen renders blijven bestaan, zoals ID's, vorige waarden of vlaggen, zonder opnieuw renderen te veroorzaken. Gebruik status voor zichtbare gebruikersinterface.