What is the difference between useRef and useState?

React refs, context and custom hooks · Freshers and experienced

Model answer

Both keep values between renders, but changing state triggers a re-render, while changing ref.current does not. Use state for data shown on screen. Use a ref for values the UI does not display (timer ids, previous values, DOM nodes).

Do not read or write ref.current during rendering for values that affect output.

Learn this topic

React Context API Explained: Share Data Without Passing Props in the course React.js Full Course: Beginner to Advanced.

Sign in to add your own answer.

More questions

• What is useRef used for?
• What is Context and when would you use it?
• What is a custom hook?
• What is forwardRef and how does it change in React 19?
• How can Context cause performance problems, and how do you reduce them?
• How do you write a useDebounce hook?