Proper State Updates with useState in React

When working with React’s useState hook, it’s important to understand how to properly update state to avoid stale state issues and ensure reliable component behavior.

The Problem: Direct State Updates

// ❌ Problematic - may use stale state
const [count, setCount] = useState(0);

const increment = () => {
  setCount(count + 1); // Directly uses current count value
};

// ❌ Especially problematic in rapid updates
const doubleIncrement = () => {
  setCount(count + 1); // First update
  setCount(count + 1); // Same value as first update
};

The Solution: Functional Updates

1. Basic Functional Update

// ✅ Correct - uses previous state value
const [count, setCount] = useState(0);

const increment = () => {
  setCount(prevCount => prevCount + 1);
};

2. Multiple Sequential Updates

// ✅ Correct - each update uses latest state
const doubleIncrement = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1); // Uses updated value
};

3. Complex State Objects

// ✅ Correct for objects/arrays
const [user, setUser] = useState({ name: '', age: 0 });

const updateName = (newName) => {
  setUser(prev => ({ ...prev, name: newName }));
};

When Functional Updates Are Essential

1. Async State Updates

// ✅ Necessary for async operations
const fetchAndIncrement = async () => {
  const result = await fetchData();
  setCount(prev => prev + result.value);
};

2. Event Handlers with Rapid Fires

// ✅ Better for rapid successive calls
const handleScroll = throttle(() => {
  setScrollY(prev => prev + window.scrollDelta);
}, 100);

3. State Depending on Previous State

// ✅ Required when new state depends on old state
const toggle = () => {
  setIsOn(prev => !prev);
};

Common Pitfalls

1. Mixing Update Styles

// ❌ Inconsistent - can lead to bugs
const [value, setValue] = useState(0);

const badUpdate = () => {
  setValue(5); // Direct value
  setValue(prev => prev + 1); // Functional update
};

2. Forgetting to Spread Previous State

// ❌ Loses other state properties
const [form, setForm] = useState({ name: '', email: '' });

const badEmailUpdate = (email) => {
  setForm(prev => ({ email })); // Loses name!
};

// ✅ Correct
const goodEmailUpdate = (email) => {
  setForm(prev => ({ ...prev, email }));
};

Performance Considerations

Functional updates are particularly important for:

1. High-frequency updates (scroll handlers, animations)
2. Complex state objects where merging is required
3. Optimized components where minimal renders matter

Best Practices

1. Default to functional updates when in doubt
2. Be consistent within a component
3. Use descriptive parameter names like prevCount for clarity
4. Combine with useCallback for stable event handlers
5. Consider useReducer for complex state logic

const stableIncrement = useCallback(
  () => setCount(prev => prev + 1),
  [] // No dependencies needed
);

Remember that functional updates ensure you’re working with the most current state value, especially important in asynchronous scenarios or when multiple updates might be batched together.