React v18 features: Batch updates

Introduction to React v18 automatic batch updates and flushSync

In this lesson, we are going to explore how React batch update feature works and how we can opt out of it.

(source: pexels.com)

If you haven’t read my previous article about React 18 Suspense, then please do so. In this article, I have briefly explained how the React 18 concurrent renderer works, how to opt in to use it and some of the new features in React 18. In this article, we are going to explore another feature.

Introduction to React v18 Suspense and Render-as-You-Fetch approach

The feature we are going to talk about today is called the “automatic batching” or the “automatic batch updates”, whichever you like but they mean the same thing. You can say an update is batched when multiple setState() calls are made but React re-renders the component only once towards the end of the last setState() call.

const handleClick = () => {
  setId(1);
  // may be component re-renders here?
  setName("John Doe");
  // may be component re-renders…