Skip to main content

What is the difference between useState and useRef?

Answer​

FeatureuseStateuseRef
Triggers re-render✅❌
Persists between renders✅✅
Access DOM elements❌✅
Mutable❌ (use setter)✅ (.current)

useState Example​

function Counter() {
	const [count, setCount] = useState(0);

	return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

useRef Example​

function TextInput() {
	const inputRef = useRef(null);

	const focusInput = () => {
		inputRef.current.focus();
	};

	return <input ref={inputRef} />;
}

When to Use​

  • useState: UI state that should trigger re-renders
  • useRef: DOM references or mutable values that shouldn't trigger re-renders