How do I decide between useRef and useState?
Ask: should changing this value update the UI? If yes, use useState so React re-renders. If no, use useRef so the value persists without triggering a re-render.
Verify This Answer
Cross-check this information using these trusted sources:
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.
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.
Still have questions?
Browse all our FAQs or reach out to our support team