Всем привет!

В работе с React каждый разработчик сталкивается с механизмом batching. Знаете ли вы, что это такое?

Batching — это техника объединения нескольких вызовов обновления состояния в одну операцию. Это помогает оптимизировать производительность, уменьшая количество перерисовок компонента.

Рассмотрим пример:

export default function App() { 
  const [username, setUsername] = useState("JohnDoe");   const [followers, setFollowers] = useState(1000); 
   const handleClear = () => { 
    setFollowers(0);     setUsername(""); 
  }  
  useEffect(() => {     console.log("Компонент был отрендерен!"); 
  });  
  return ( /* JSX код */ ); 
}

Казалось бы, при нажатии на кнопку clear компонент должен перерисоваться дважды из-за двух изменений состояния. Но благодаря batching в логах вы увидите лишь одно сообщение: «Компонент был отрендерен!»

Почему так происходит? React группирует несколько изменений состояния, вызванных последовательно, в одно обновление, выполняя всего одну перерисовку.

Для приложений с частыми обновлениями состояния этот механизм становится настоящим спасением, обеспечивая плавность и отзывчивость интерфейса.

Но бывают ситуации, когда нам такое поведение не подходит. В этом случае React предоставляет метод с именем flushSync() в react-dom, который позволяет нам инициировать повторный рендеринг для определенного обновления состояния.

const handleClick = () => {
  flushSync(() => {    setClicked(!clicked);
  // react will create a re-render here  });
    setCount(count + 1);
  // react will create a re-render here};

Но flushSync() стоит использовать осторожно, так как он может значительно снизить производительность.

@chulakov_dev