The answer
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.
useRef vs useState: When to Use Which in React
What is the difference between useRef and useState?
More FAQs in useRef vs useState: When to Use Which in React
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.
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.