با هربار تغییر استیت، کامپوننت ریرندر می‌شود، و بدنه آن دوباره اجرا می‌شود. در مثال زیر، با هربار رندر شدن کامپوننت App مقدار id متفاوت خواهد بود:
برای حفظ شدن مقدار id بین ریرندرهای مختلف می‌توان از useState یا سایر هوکها استفاده کرد، اما با تغییر id مجددا کامپوننت App ریرندر خواهد شد:
با کمک هوک useRef می‌توان رفرنسی از یک مقدار ایجاد کرد که با ریرندر شدن کامپوننت مقدارش حفظ شده و تاثیری روی رندر شدن کامپوننت نداشته باشد:
هوک useRef داری یک ورودی اختیاری است، که مقدار اولیه ref را دریافت میکند و یک رفرنس به عنوان خروجی برمیگرداند.
درمثال بالا مقدار idRef بین رندرهای مختلف ثابت است و با آپدیت مقدار آن، ریرندر جدیدی رخ نمی‌دهد. همچنین کاربرد دیگر ref دستکاری DOM بدون تاثیرات رندری است:
ابتدا بوسیله هوک useRef یک ref بنام inputRef ایجاد کردیم، و آنرا از طریق پراپ ref به هرکدام از node های jsx پاس میدهیم. در این مثال به input دادیم. اکنون با استفاده inputRef میتوانیم input خود در dom را دستکاری کنیم. در ادامه مقایسه ای بین گرفتن مقدار input از طریق state و ref انجام میدهیم.
در مثال بالا، با هربار تایپ کاراکتر در اینپوت، کامپوننت App ریرندر می‌شود.
در مثال بالا، با تغییر مقدار اینپوت، ریرندری صورت نمیگیرد.