How Do You Manage State in React?
💡 Concept Name
State Management in React – The process of tracking, updating, and sharing data across components.
📘 Quick Intro
React state can be local (within a component) or global (shared across components). Managing state effectively is key to building dynamic and scalable React applications.
🧠 Analogy / Short Story
Imagine a digital whiteboard where multiple users can write notes. Each user has their own space (local state), but there's also a shared board (global state). If one person updates a note, everyone sees it instantly. React manages this sync with tools like useState, useReducer, and Context.
🔧 Technical Explanation
- 🟢
useState: Ideal for local component state. - 🧩
useReducer: Best for complex state logic or multiple values. - 🌐 Context API: Used to pass global state across deeply nested components.
- 🗂 External Libraries: Redux, Zustand, Jotai, and Recoil offer scalable global state management.
- 🔁 State should be predictable, minimal, and colocated when possible.
💻 Real Code Example
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
❓ Interview Q&A
Q1: What hook is used for local state in React?
A: useState
Q2: When should you use useReducer?
A: For complex state logic or when the next state depends on the previous one.
Q3: How do you manage global state?
A: Use Context API or state libraries like Redux or Zustand.
Q4: What are downsides of overusing Context?
A: It can cause unnecessary re-renders if not optimized properly.
Q5: What does the setCount function do in useState?
A: It updates the state value and triggers a re-render.
Q6: Can we lift state up to share it?
A: Yes, by placing state in a common parent component.
Q7: What is an action in useReducer?
A: An object that describes the type of state update.
Q8: Should we use Redux in small apps?
A: It may be overkill; use simpler tools like Context or Zustand.
Q9: How do we avoid prop drilling?
A: By using the Context API or custom hooks.
Q10: What's the role of initialState in useReducer?
A: It defines the starting value for the reducer-managed state.
📝 MCQs
Q1. Which hook is used for local state?
- useReducer
- useMemo
- useEffect
- useState
Q2. When is useReducer preferred?
- For styling
- For routing
- When managing complex state logic
- When working with arrays
Q3. What does Context API help with?
- CSS in JS
- Routing
- Data fetching
- Global state sharing
Q4. Which is NOT a state management library?
- Redux
- Recoil
- React Router
- Zustand
Q5. How to avoid prop drilling?
- Use CSS modules
- Use Context or global state
- Use React.memo
- Use loops
Q6. Which hook helps cache values?
- useEffect
- useState
- useReducer
- useMemo
Q7. Redux is mostly used for?
- Component styling
- Event handling
- Centralized global state
- DOM manipulation
Q8. What triggers a re-render in useState?
- Console.log
- Changing CSS
- Calling the setter function
- Nothing
Q9. What is an alternative to Redux?
- Sass
- Zustand
- Webpack
- Jest
Q10. What is the main benefit of lifting state up?
- Avoiding hooks
- Better styling
- Sharing data across child components
- Avoiding JSX
💡 Bonus Insight
Consider tools like Zustand or Recoil for apps needing scalable yet minimal global state without Redux boilerplate. And always colocate state as close to where it's needed as possible.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!