How does useState work in React?
💡 Concept Name
useState is a React hook that allows functional components to have state variables and update them over time.
📘 Quick Intro
The useState hook lets you declare state variables in functional components. When the state changes, React re-renders the component to reflect the new values.
🧠 Analogy / Short Story
Imagine a scoreboard at a game. The score changes as the game progresses, and the display updates automatically. useState is like the scoreboard's memory — it keeps track of the current score and triggers updates whenever it changes.
🔧 Technical Explanation
- ⚛️
useStatereturns a pair: the current state value and a function to update it. - 🔄 Calling the update function schedules a re-render with the new state.
- 🧩 You can have multiple
useStatecalls to manage different state variables. - ⏳ Initial state can be a value or a function returning a value for lazy initialization.
💻 Real Code Example
// Import useState from React
import React, { useState } from 'react';
function Counter() {
// Declare a state variable 'count' with initial value 0
const [count, setCount] = useState(0);
// Function to increment count
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Current count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
❓ Interview Q&A
Q1: What does useState return?
A: It returns an array with the current state and a function to update it.
Q2: Can useState be called multiple times in one component?
A: Yes, to manage multiple state variables.
Q3: How do you update state using useState?
A: By calling the setter function returned by useState.
Q4: What happens when you call the state update function?
A: React schedules a re-render with the updated state.
Q5: Can the initial state be a function?
A: Yes, for lazy initialization.
Q6: Is useState available in class components?
A: No, useState is only for functional components.
Q7: What hook would you use for side effects instead of useState?
A: useEffect.
Q8: Can you update state based on previous state?
A: Yes, by passing a function to the setter.
Q9: Does useState replace this.state in class components?
A: It replaces similar functionality in functional components.
Q10: Can useState cause performance issues?
A: If misused, frequent updates can lead to unnecessary renders.
📝 MCQs
Q1. What does useState return?
- A boolean
- An object
- An array with current state and updater function
- A number
Q2. Where can useState be used?
- Anywhere in JS file
- Inside class components
- Inside functional components
- Only in hooks
Q3. How do you update state with useState?
- Direct assignment
- Using this.setState
- By calling the setter function
- Using props
Q4. Can you have multiple useState calls?
- No
- Yes
- Only one per component
- Only in classes
Q5. What is lazy initialization in useState?
- Setting state later
- Initial state set by a function
- Using Redux
- Delayed render
Q6. Can useState be used in class components?
- Yes
- No
- Only in lifecycle methods
- Only in constructor
Q7. What happens after calling the setter function?
- Nothing
- Component unmounts
- Component re-renders with new state
- Page reloads
Q8. How to update state based on previous state?
- Use setTimeout
- Pass a function to setter
- Directly modify state
- Call useEffect
Q9. Does useState replace this.state?
- No
- Yes for functional components
- Only in classes
- Sometimes
Q10. What hook complements useState for side effects?
- useRef
- useContext
- useEffect
- useReducer
💡 Bonus Insight
Using useState properly leads to cleaner, more predictable functional components. It encourages immutability by avoiding direct state mutation and ensures React manages UI updates efficiently.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!