Why does my UI not update when I change a useRef value?
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.
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.
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