DEV Community

loading...
Cover image for Batch Your React Updates

Batch Your React Updates

Raibima Putra
Frontend Engineer based in Jakarta, Indonesia.
・2 min read

React doesn't automatically batch updates that you trigger in:

  • Native DOM event listeners (e.g., el.addEventListener())
  • Async callbacks (e.g., promises, timeouts, intervals)

Consider the following code:

fetchProfile(userId)
  .then(({name, age}) => {
    setName(name);
    setAge(age);
  });

In the above example, React will re-render your UI tree twice! Try it on CodeSandbox.

One way to fix this is to use a single state variable.

fetchProfile(userId)
  .then(({name, age}) => {
    // now instead of using two state
    // variables, we just use one.
    setUserProfile({ name,  age });
  });

Try it on CodeSandbox.

Another way is to wrap updates inside unstable_batchedUpdates callback. As the name suggests, this API will batch your updates in a single reconciliation pass, resulting in less component renders.

Don't worry, the API is very stable despite the unstable_ prefix. The only thing to keep in mind is that the API is renderer-specific, meaning that on the web it should be imported from the react-dom package, not react.

import {unstable_batchedUpdates} from 'react-dom';
// react-native
import {unstable_batchedUpdates} from 'react-native';

Then, use it like so:

unstable_batchedUpdates(() => {
  setName('John');
  setAge(25);
});

Try it on CodeSandbox.

You might be thinking that this is pretty unintuitive and verbose. I sometimes wonder myself why this isn't automatic. The good news is that React will make it so in a future release, but we need to first opt-in to either Blocking Mode, or Concurrent Mode. In the meantime, try these workarounds!

Discussion (0)