Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке батчинг (Automatic Batching)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Batching (батчинг)** - це механізм, при якому **React групує кілька оновлень стану (setState / useState)** в **один спільний рендер**, щоб **зменшити кількість перерендерів** і підвищити продуктивність. **Ключове:** до React 18 батчинг працював тільки всередині синхронних обробників подій React, а в React 18 він став автоматичним у всіх контекстах, включно з `setTimeout`, промісами та async/await.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що таке batching (батчинг) **Batching** (від англ. *batch* - "пакет, партія") - це механізм, при якому **React групує кілька оновлень стану (setState / useState)** в **один спільний рендер**, щоб **зменшити кількість перерендерів** і підвищити продуктивність. --- ## До React 18 (Legacy batching) Раніше (до React 18) React вмів групувати (батчити) оновлення **тільки всередині синхронних обробників подій React**. Наприклад: ```javascript function handleClick() { setCount(c => c + 1); setFlag(f => !f); } ``` React виконає **один рендер**, тому що обидва `setState` знаходяться всередині **однієї події React (onClick)**. Але ось що відбувалося **в асинхронних контекстах**: ```javascript setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); }, 1000); ``` React 17 і нижче виконають **два окремих рендери**, тому що батчинг **не працював** поза React-подіями. --- ## React 18: Automatic Batching У **React 18** батчинг став **автоматичним у всіх контекстах** - навіть всередині `setTimeout`, промісів, async/await, fetch, ефектів тощо. Той самий код тепер працює ефективніше: ```javascript setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); }, 1000); ``` **React 18** виконає **тільки один рендер**, оскільки обидва оновлення автоматично об'єднуються в один пакет (*batch*). --- ## Що відбувається всередині Коли викликається `setState()` (або оновлення `useState`): - React **не оновлює одразу DOM**; - він **збирає всі зміни**, які відбулися "в рамках одного циклу"; - потім виконує **один спільний рендер** і оновлює DOM разом. Тобто: ```javascript setState() → (React ставить у чергу) setState() → (React ставить у чергу) --- батч завершено --- → один рендер і commit ``` --- ## Приклад порівняння ### Без батчингу (React 17) ```javascript setCount(c => c + 1); // render #1 setFlag(f => !f); // render #2 ``` Два окремих перерендерювання → більше витрат і мерехтіння UI. --- ### З батчингом (React 18) ```javascript setCount(c => c + 1); setFlag(f => !f); // React об'єднує → один рендер ``` Один рендер → швидше і плавніше. --- ## Коли батчинг не виконується Іноді потрібно *одразу* оновити DOM, минаючи batching - наприклад, щоб миттєво побачити ефект перед наступними оновленнями. Для цього є API: ```javascript import { flushSync } from "react-dom"; flushSync(() => { setCount(c => c + 1); }); // React негайно виконає оновлення (без batching) ``` --- ## Ключові переваги Automatic Batching | Перевага | Опис | |---|---| | Менше перерендерів | Оновлення групуються → менше витрат на віртуальний і реальний DOM | | Плавніший інтерфейс | React не блокується на безлічі дрібних оновлень | | Менше коду для оптимізації | Не потрібно вручну "об'єднувати" виклики setState | | Працює скрізь | Навіть у `setTimeout`, промісах, async-функціях, `fetch` тощо | --- ## Підсумок > **Automatic Batching** - це автоматичне об'єднання кількох викликів `setState()` > в один рендер, **незалежно від контексту**, щоб підвищити продуктивність і плавність інтерфейсу.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.