FrontendDeveloper.in

React question detail

Is it possible to prevent automatic batching?

Yes, it is possible to prevent automatic batching default behavior. There might be cases where you need to re-render your component after each state update or updating one state depends on another state variable. Considering this situation, React introduced flushSync method from react-dom API for the usecases where you need to flush state updates to DOM immediately.

The usage of flushSync method within an onClick event handler will be looking like as below,

import { flushSync } from "react-dom";

const handleClick = () => {
flushSync(() => {
setClicked(!clicked); //Component will create a re-render here
});

setCount(count + 1); // Component will create a re-render again here
};

In the above click handler, React will update DOM at first using flushSync and second time updates DOM because of the counter setter function by avoiding automatic batching.

Back to all React questions
Get LinkedIn Premium at Rs 399