The answer
For values that should persist across renders but should not trigger re-renders: DOM references, timer ids, previous values, mounted flags, and integration with non-React code. If the UI should react to a change, use useState instead.
useRef vs useState: When to Use Which in React
When should I use useRef instead of useState?
More FAQs in useRef vs useState: When to Use Which in React
useState triggers a re-render when it changes. useRef does not. Use useState for values that should drive the UI, and useRef for values that should persist without triggering re-renders.
Because useRef does not trigger re-renders. If a value should drive the UI, it belongs in useState, not useRef. Using useRef for UI state is a common mistake that leaves the UI out of sync.
useRef. Timer ids do not need to trigger re-renders, so storing them in useState causes unnecessary re-renders when the id changes. useRef lets you persist the id without affecting the render cycle.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.