What is state in React, and how do you manage it in a functional component?
State in React is a JavaScript object that stores data that may change over time and affects the component’s rendering. Unlike props (which are passed from parent components and are read-only), state is managed internally by the component itself. When state changes, React re-renders the component to reflect those changes in the UI.
In functional components, state is managed using React Hooks, primarily the useState hook, which was introduced in React 16.8.
Basic State Management with useState
The useState hook is the simplest way to add state to a functional component.
import React, { useState } from 'react';
function Counter() {
// useState returns an array with two elements:
// 1. The current state value
// 2. A function to update that state value
const [count, setCount] = useState(0); // 0 is the initial state
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}Key Points about useState
- Initial State: The argument passed to
useStateis the initial state value. - State Updates: The update function (like
setCount) replaces the previous state with a new value. - Multiple State Variables: You can call
useStatemultiple times in a single component.
function UserForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [age, setAge] = useState(25);
return (
<form>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name"
/>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
/>
<input
type="number"
value={age}
onChange={(e) => setAge(parseInt(e.target.value) || 0)}
placeholder="Age"
/>
</form>
);
}Using Objects with useState
You can use objects to group related state variables.
function UserForm() {
const [user, setUser] = useState({
name: '',
email: '',
age: 25
});
const handleChange = (e) => {
const { name, value } = e.target;
// Important: spread the previous state to avoid losing other fields
setUser({
...user,
[name]: name === 'age' ? parseInt(value) || 0 : value
});
};
return (
<form>
<input
type="text"
name="name"
value={user.name}
onChange={handleChange}
placeholder="Name"
/>
<input
type="email"
name="email"
value={user.email}
onChange={handleChange}
placeholder="Email"
/>
<input
type="number"
name="age"
value={user.age}
onChange={handleChange}
placeholder="Age"
/>
</form>
);
}Functional Updates
When new state depends on the previous state, you should use the functional update form of setState.
function Counter() {
const [count, setCount] = useState(0);
// Not ideal - may lead to stale state in certain scenarios
const incrementBad = () => {
setCount(count + 1);
};
// Better - uses functional update
const incrementGood = () => {
setCount(prevCount => prevCount + 1);
};
// This will correctly increment the count by 3
const incrementThrice = () => {
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementGood}>Increment</button>
<button onClick={incrementThrice}>+3</button>
</div>
);
}Lazy Initial State
If the initial state is expensive to compute, you can provide a function to useState.
function TodoList() {
// This function only runs during the first render
const [todos, setTodos] = useState(() => {
const savedTodos = localStorage.getItem('todos');
if (savedTodos) {
return JSON.parse(savedTodos);
}
return []; // Default initial state
});
// Rest of component...
}Complex State Management with useReducer
For more complex state logic, useReducer is often more appropriate than useState.
import React, { useReducer } from 'react';
// Reducer function
function todoReducer(state, action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, {
id: Date.now(),
text: action.payload,
completed: false
}];
case 'TOGGLE_TODO':
return state.map(todo =>
todo.id === action.payload
? { ...todo, completed: !todo.completed }
: todo
);
case 'DELETE_TODO':
return state.filter(todo => todo.id !== action.payload);
default:
return state;
}
}
function TodoApp() {
const [todos, dispatch] = useReducer(todoReducer, []);
const [text, setText] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (!text.trim()) return;
dispatch({ type: 'ADD_TODO', payload: text });
setText('');
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Add todo"
/>
<button type="submit">Add</button>
</form>
<ul>
{todos.map(todo => (
<li
key={todo.id}
style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
>
<span onClick={() => dispatch({
type: 'TOGGLE_TODO',
payload: todo.id
})}>
{todo.text}
</span>
<button onClick={() => dispatch({
type: 'DELETE_TODO',
payload: todo.id
})}>
Delete
</button>
</li>
))}
</ul>
</div>
);
}Managing Side Effects with useEffect
The useEffect hook is used to perform side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM.
import React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// This function runs after render and when userId changes
const fetchUser = async () => {
setLoading(true);
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
setUser(data);
} catch (error) {
console.error('Error fetching user:', error);
} finally {
setLoading(false);
}
};
fetchUser();
// Cleanup function runs before the effect runs again or component unmounts
return () => {
console.log('Cleaning up previous effect');
};
}, [userId]); // Dependency array - effect runs when userId changes
if (loading) return <div>Loading...</div>;
if (!user) return <div>User not found</div>;
return (
<div>
<h1>{user.name}</h1>
<p>Email: {user.email}</p>
<p>Phone: {user.phone}</p>
</div>
);
}Memoization with useMemo and useCallback
To optimize performance, React provides hooks for memoizing values and callbacks.
import React, { useState, useMemo, useCallback } from 'react';
function ProductList({ products, category }) {
const [sortBy, setSortBy] = useState('price');
// Memoized filtered and sorted products
const filteredAndSortedProducts = useMemo(() => {
console.log('Recalculating filtered and sorted products');
// First filter by category
const filtered = category
? products.filter(product => product.category === category)
: products;
// Then sort
return [...filtered].sort((a, b) => {
if (sortBy === 'price') {
return a.price - b.price;
} else if (sortBy === 'name') {
return a.name.localeCompare(b.name);
}
return 0;
});
}, [products, category, sortBy]); // Only recalculate when these dependencies change
// Memoized callback function
const handleAddToCart = useCallback((productId) => {
console.log(`Adding product ${productId} to cart`);
// Add to cart logic
}, []); // Empty dependency array means this function never changes
return (
<div>
<div className="sort-controls">
<label>
Sort by:
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
>
<option value="price">Price</option>
<option value="name">Name</option>
</select>
</label>
</div>
<div className="product-grid">
{filteredAndSortedProducts.map(product => (
<ProductCard
key={product.id}
product={product}
onAddToCart={handleAddToCart}
/>
))}
</div>
</div>
);
}
// Using React.memo to prevent unnecessary re-renders
const ProductCard = React.memo(function ProductCard({ product, onAddToCart }) {
console.log(`Rendering ProductCard for ${product.name}`);
return (
<div className="product-card">
<h3>{product.name}</h3>
<p>₹{product.price}</p>
<button onClick={() => onAddToCart(product.id)}>
Add to Cart
</button>
</div>
);
});Sharing State Between Components
1. Lifting State Up
The most basic way to share state is to move it to the closest common ancestor.
function ParentComponent() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Count: {count}</h1>
<ChildA count={count} setCount={setCount} />
<ChildB count={count} setCount={setCount} />
</div>
);
}
function ChildA({ count, setCount }) {
return (
<button onClick={() => setCount(count + 1)}>
Increment from A
</button>
);
}
function ChildB({ count, setCount }) {
return (
<button onClick={() => setCount(count - 1)}>
Decrement from B
</button>
);
}2. Context API
For sharing state across many components without prop drilling, use the Context API.
import React, { createContext, useState, useContext } from 'react';
// Create a context
const ThemeContext = createContext();
// Provider component
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};
// Value to be provided to consuming components
const value = {
theme,
toggleTheme
};
return (
<ThemeContext.Provider value={value}>
{children}
</ThemeContext.Provider>
);
}
// Custom hook for consuming the context
function useTheme() {
const context = useContext(ThemeContext);
if (context === undefined) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
}
// App component with provider
function App() {
return (
<ThemeProvider>
<Header />
<MainContent />
<Footer />
</ThemeProvider>
);
}
// Components that consume the context
function Header() {
const { theme, toggleTheme } = useTheme();
return (
<header className={`header ${theme}`}>
<h1>My App</h1>
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
</header>
);
}
function MainContent() {
const { theme } = useTheme();
return (
<main className={`main ${theme}`}>
<p>This is the main content with {theme} theme.</p>
</main>
);
}3. Custom Hooks
Custom hooks allow you to extract and reuse stateful logic.
// Custom hook for form handling
function useForm(initialValues) {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState({});
const [touched, setTouched] = useState({});
const handleChange = (e) => {
const { name, value } = e.target;
setValues({
...values,
[name]: value
});
};
const handleBlur = (e) => {
const { name } = e.target;
setTouched({
...touched,
[name]: true
});
};
const reset = () => {
setValues(initialValues);
setErrors({});
setTouched({});
};
return {
values,
errors,
touched,
handleChange,
handleBlur,
reset
};
}
// Using the custom hook
function SignupForm() {
const {
values,
errors,
touched,
handleChange,
handleBlur,
reset
} = useForm({
name: '',
email: '',
password: ''
});
const handleSubmit = (e) => {
e.preventDefault();
// Validation logic
console.log('Form values:', values);
reset();
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input
type="text"
name="name"
value={values.name}
onChange={handleChange}
onBlur={handleBlur}
/>
{touched.name && errors.name && (
<div className="error">{errors.name}</div>
)}
</div>
{/* Other form fields */}
<button type="submit">Sign Up</button>
</form>
);
}Real-World Example
In a recent e-commerce project, I implemented a shopping cart feature using React state:
import React, { useState, useEffect, useCallback, useMemo } from 'react';
// Custom hook for cart management
function useCart() {
// Initialize cart from localStorage or empty array
const [items, setItems] = useState(() => {
const savedCart = localStorage.getItem('cart');
return savedCart ? JSON.parse(savedCart) : [];
});
// Save cart to localStorage whenever it changes
useEffect(() => {
localStorage.setItem('cart', JSON.stringify(items));
}, [items]);
// Add item to cart
const addItem = useCallback((product, quantity = 1) => {
setItems(prevItems => {
const existingItem = prevItems.find(item => item.id === product.id);
if (existingItem) {
// Update quantity if item already exists
return prevItems.map(item =>
item.id === product.id
? { ...item, quantity: item.quantity + quantity }
: item
);
} else {
// Add new item
return [...prevItems, { ...product, quantity }];
}
});
}, []);
// Remove item from cart
const removeItem = useCallback((productId) => {
setItems(prevItems => prevItems.filter(item => item.id !== productId));
}, []);
// Update item quantity
const updateQuantity = useCallback((productId, quantity) => {
if (quantity <= 0) {
removeItem(productId);
return;
}
setItems(prevItems =>
prevItems.map(item =>
item.id === productId
? { ...item, quantity }
: item
)
);
}, [removeItem]);
// Clear cart
const clearCart = useCallback(() => {
setItems([]);
}, []);
// Calculate cart totals
const totals = useMemo(() => {
return items.reduce(
(acc, item) => {
const itemTotal = item.price * item.quantity;
return {
itemCount: acc.itemCount + item.quantity,
subtotal: acc.subtotal + itemTotal,
tax: acc.tax + (itemTotal * 0.18), // 18% tax
total: acc.total + (itemTotal * 1.18) // Subtotal + tax
};
},
{ itemCount: 0, subtotal: 0, tax: 0, total: 0 }
);
}, [items]);
return {
items,
addItem,
removeItem,
updateQuantity,
clearCart,
totals
};
}
// Main ShoppingCart component
function ShoppingCart() {
const {
items,
addItem,
removeItem,
updateQuantity,
clearCart,
totals
} = useCart();
const [isCheckingOut, setIsCheckingOut] = useState(false);
const handleCheckout = () => {
setIsCheckingOut(true);
// In a real app, you would redirect to checkout page or show checkout form
};
if (items.length === 0) {
return (
<div className="empty-cart">
<h2>Your cart is empty</h2>
<p>Add some products to your cart to see them here.</p>
<button onClick={() => window.history.back()}>
Continue Shopping
</button>
</div>
);
}
return (
<div className="shopping-cart">
<h1>Your Shopping Cart</h1>
<div className="cart-items">
{items.map(item => (
<CartItem
key={item.id}
item={item}
onUpdateQuantity={updateQuantity}
onRemove={removeItem}
/>
))}
</div>
<div className="cart-summary">
<div className="summary-row">
<span>Items:</span>
<span>{totals.itemCount}</span>
</div>
<div className="summary-row">
<span>Subtotal:</span>
<span>₹{totals.subtotal.toFixed(2)}</span>
</div>
<div className="summary-row">
<span>Tax (18%):</span>
<span>₹{totals.tax.toFixed(2)}</span>
</div>
<div className="summary-row total">
<span>Total:</span>
<span>₹{totals.total.toFixed(2)}</span>
</div>
<div className="cart-actions">
<button className="clear-cart" onClick={clearCart}>
Clear Cart
</button>
<button
className="checkout-button"
onClick={handleCheckout}
disabled={isCheckingOut}
>
{isCheckingOut ? 'Processing...' : 'Proceed to Checkout'}
</button>
</div>
</div>
</div>
);
}
// CartItem component
function CartItem({ item, onUpdateQuantity, onRemove }) {
const handleQuantityChange = (e) => {
const newQuantity = parseInt(e.target.value, 10);
onUpdateQuantity(item.id, newQuantity);
};
return (
<div className="cart-item">
<div className="item-image">
<img src={item.image} alt={item.name} />
</div>
<div className="item-details">
<h3>{item.name}</h3>
<p className="item-price">₹{item.price}</p>
</div>
<div className="item-controls">
<label>
Qty:
<input
type="number"
min="1"
value={item.quantity}
onChange={handleQuantityChange}
/>
</label>
<button
className="remove-button"
onClick={() => onRemove(item.id)}
>
Remove
</button>
</div>
<div className="item-total">
₹{(item.price * item.quantity).toFixed(2)}
</div>
</div>
);
}This example demonstrates:
- Custom Hook for State Logic: Encapsulating cart state management in a reusable hook
- Multiple State Variables: Managing different aspects of the cart state
- Local Storage Persistence: Saving and retrieving state from localStorage
- Functional Updates: Using the functional form of setState for updates based on previous state
- Memoization: Using useMemo and useCallback for performance optimization
- Derived State: Calculating totals based on the items in the cart
State Management Best Practices
- Keep State DRY: Don’t repeat state in multiple places
- Single Source of Truth: For each piece of data, decide which component owns it
- Lift State Up: Move shared state to the closest common ancestor
- Keep State Local: When possible, keep state as close as possible to where it’s used
- Use Functional Updates: When new state depends on previous state
- Normalize Complex State: For complex data structures, consider normalizing state (similar to a database)
- Consider External State Management: For large applications, consider libraries like Redux, Zustand, or Recoil
Common State Management Mistakes
Mutating State Directly: Always use setState functions to update state
// Wrong const [user, setUser] = useState({ name: 'Rahul' }); user.name = 'Priya'; // Direct mutation! // Correct setUser({ ...user, name: 'Priya' });Not Using Functional Updates: When updates depend on previous state
// May lead to stale state setCount(count + 1); // Correct setCount(prevCount => prevCount + 1);Updating State Too Often: Frequent updates can cause performance issues
// Inefficient - causes multiple re-renders items.forEach(item => { setTotal(total + item.price); }); // Better - single update const newTotal = items.reduce((sum, item) => sum + item.price, 0); setTotal(newTotal);Storing Derived Data: Don’t store values that can be calculated from existing state
// Unnecessary derived state const [items, setItems] = useState([]); const [itemCount, setItemCount] = useState(0); // When adding an item setItems([...items, newItem]); setItemCount(items.length + 1); // Better: derive itemCount when needed const itemCount = items.length;
Interview Tips
- Explain that state represents data that changes over time and affects what is rendered
- Demonstrate knowledge of both basic (useState) and advanced (useReducer) state management
- Emphasize the importance of immutability when updating state
- Be prepared to discuss when to use local component state vs. global state management
- Share a specific example of how you’ve used state effectively in a real project
- Mention performance optimizations like memoization and batched updates
- Be ready to explain the difference between props and state
Test Your Knowledge
Take a quick quiz to test your understanding of this topic.