Handling State Updates Inside Loops in React

When you need to update state multiple times within a loop, you must be careful to avoid performance issues and ensure state consistency. Here’s how to properly manage this situation:

The Problem: Unbatched Loop Updates

// ❌ Problematic - triggers multiple re-renders
for (let i = 0; i < 10; i++) {
  this.setState({ count: i }); // Will cause 10 separate renders
}

Why This is Bad

1. Performance Impact: Each setState may trigger a re-render
2. Race Conditions: Later updates may overwrite earlier ones unpredictably
3. Wasted Cycles: Intermediate states may be irrelevant to your final result

Solution 1: Batch Updates with Functional setState

// ✅ Correct - batches updates in class components
this.setState(prevState => {
  let newState = { ...prevState };
  for (let i = 0; i < 10; i++) {
    newState.count = i; // Accumulate all changes
  }
  return newState; // Single update
});

Solution 2: Use React’s Automatic Batching (React 18+)

// ✅ Works in React 18+ (automatic batching)
const updateMultipleTimes = () => {
  for (let i = 0; i < 10; i++) {
    setCount(i); // Batched in React 18
  }
};

Solution 3: Accumulate Changes First

// ✅ Better pattern - compute final state first
let finalCount = 0;
for (let i = 0; i < 10; i++) {
  finalCount = i; // Or whatever your logic is
}
this.setState({ count: finalCount }); // Single update

Function Component Example

const [data, setData] = useState([]);

const processItems = (items) => {
  // ❌ Bad - multiple state updates
  // items.forEach(item => setData(prev => [...prev, item]));

  // ✅ Good - single update
  setData(prev => [...prev, ...items]);
};

Special Case: Async Operations in Loops

For async operations in loops, use promises:

const processAll = async () => {
  let results = [];
  for (let item of items) {
    const result = await fetchItem(item);
    results.push(result);
  }
  setData(results); // Single update
};

Key Takeaways

1. Minimize State Updates – Compute changes before updating state
2. Use Functional Updates – When you need sequential changes
3. Leverage Batching – Especially in React 18+
4. Consider Alternatives – Like useReducer for complex state logic

Remember: Each state update can potentially trigger a re-render, so optimizing updates inside loops is crucial for performance.