The answer
useState triggers a re-render when it changes. useRef does not. Use useState for values that should update the UI; use useRef for values that should persist without updating the UI, like DOM references or timer ids.
useRef in React Explained: Beyond Just Accessing the DOM
How is useRef different from useState?
More FAQs in useRef in React Explained: Beyond Just Accessing the DOM
useRef returns a mutable object with a current property that persists across renders. Mutating current does not trigger a re-render, which is the key difference from useState.
Accessing DOM elements like focusing an input, and storing mutable values that should persist across renders without triggering re-renders, like a timer id, a previous value, or a flag for whether the component is mounted.
Because useRef does not trigger re-renders. If a value should change the UI, it belongs in useState, not useRef. useRef is for values that persist without driving the UI.
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.