React重复渲染与更新问题：批量更新state后仅渲染一次

Great question! When you're dealing with multiple state updates and want to avoid unnecessary re-renders, React gives you a few straightforward ways to batch those changes so your component only re-renders once after all updates are applied. Let's walk through the best solutions for your scenario:

1. Merge All State Updates Into a Single setState Call #

The simplest approach is to update all your state properties in one go using a single setState invocation. React will process this as a single update, triggering only one re-render.

Here's how you'd apply this to your example:

this.setState({
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5
});

This works perfectly when all your state updates are independent and don't rely on the previous state values.

2. Use Functional setState for Updates That Depend on Previous State #

If your updates depend on the current state (e.g., incrementing a value based on its previous value), you can use the functional form of setState. Even if you call it multiple times in sequence, React will automatically batch these updates in most cases (like within synthetic events or lifecycle methods) and only re-render once.

Example:

// Suppose a, b, etc. were already set to some initial values
this.setState(prevState => ({ a: 1 })); // Or prevState.a + 1 if you need to increment
this.setState(prevState => ({ b: 2 }));
this.setState(prevState => ({ c: 3 }));
this.setState(prevState => ({ d: 4 }));
this.setState(prevState => ({ e: 5 }));

React collects all these functional updates, processes them in order, and then triggers a single re-render with the final state.

3. Handle Batch Updates in Async Code (Pre-React 18) #

Before React 18, updates inside async callbacks (like setTimeout, Promise.then, or native event listeners) wouldn't be automatically batched. To fix this, you can use ReactDOM's unstable_batchedUpdates utility to wrap your state updates:

import { unstable_batchedUpdates } from 'react-dom';

// Inside an async callback
setTimeout(() => {
  unstable_batchedUpdates(() => {
    this.setState({ a: 1 });
    this.setState({ b: 2 });
    this.setState({ c: 3 });
    this.setState({ d: 4 });
    this.setState({ e: 5 });
  });
}, 1000);

Note: Even though it has "unstable" in the name, this API has been widely used and reliable for years.

4. React 18's Automatic Batching (No Extra Work Needed!) #

React 18 introduced automatic batching for all state updates—regardless of whether they're in synthetic events, async callbacks, or native events. That means you can call setState multiple times in an async function, and React will still batch them into a single re-render without any extra code:

// React 18+ - No need for manual batching here!
setTimeout(() => {
  this.setState({ a: 1 });
  this.setState({ b: 2 });
  this.setState({ c: 3 });
  this.setState({ d: 4 });
  this.setState({ e: 5 });
}, 1000);

Quick Summary #

• For independent state updates: Use a single setState call with all properties.
• For state updates dependent on previous state: Use functional setState (React batches these automatically in sync contexts).
• Pre-React 18 async code: Wrap updates with unstable_batchedUpdates.
• React 18+: Sit back—automatic batching handles everything for you.

内容的提问来源于stack exchange，提问作者Om Agrawal