Q334- How useState is different from useRef hook in React?

Both useState and useRef store values in a component, but they are used for very different purposes.

---

🔹 useState

What it does

• Stores state that affects UI
• Triggers re-render when updated
• Used for dynamic data shown on screen

Example

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

setCount(count + 1); // re-renders component

Use cases

✔ Form inputs
✔ Counters
✔ API data
✔ Toggle UI

---

🔹 useRef

What it does

• Stores a mutable value
• Does NOT trigger re-render
• Persists value across renders

Example

const countRef = useRef(0);

countRef.current += 1; // no re-render

Use cases

✔ DOM access
✔ Previous values
✔ Timers & intervals
✔ Mutable flags

---

🔥 Key Differences

Feature	useState	useRef
Causes re-render	✅ Yes	❌ No
Value change visible in UI	✅	❌
Mutable	❌ (immutable updates)	✅
Access via	value	.current
Persists across renders	✅	✅

---

🧪 Real Example

function App() {
  const [count, setCount] = useState(0);
  const renderCount = useRef(0);

  renderCount.current++;

  return (
    <div>
      <p>Count: {count}</p>
      <p>Renders: {renderCount.current}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

---

🎯 Short Interview Answer

useState is used for data that affects rendering and triggers a re-render when updated, while useRef stores mutable values that persist across renders without causing re-renders.

---

⭐ One-line summary

useState updates UI, useRef stores values without re-rendering.