Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чому Zustand називають мінімалістичним state-менеджером?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Zustand не потребує **actions**, **reducers**, **dispatch** чи **context-providers** - весь стан описується однією функцією `create()`, яка повертає хук, тому один рядок створює повноцінний store. **Ключове:** бандл Zustand важить лише **~1 КБ (gzip)**, у ньому немає залежностей і зайвих утиліт - тільки функціональне ядро.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення### 1. Просте ядро - без зайвої архітектури - Zustand не потребує **actions**, **reducers**, **dispatch** або **context-providers**. - Весь стан описується однією функцією `create()`, яка повертає хук. - Тобто **один рядок створює повноцінний store**: ```javascript const useStore = create(() => ({ count: 0 })) ``` --- ### 2. Без React-Context і провайдерів - На відміну від Redux або Context API, Zustand **не обгортає весь застосунок** у `<Provider>`. - Store існує **поза React**, як звичайний JavaScript-об'єкт. - Це спрощує архітектуру і покращує продуктивність (немає зайвих ререндерів при оновленні контексту). --- ### 3. Маленький розмір бібліотеки - Бандл Zustand важить лише **~1 КБ (gzip)**. - У ньому немає залежностей і додаткових утиліт - тільки функціональне ядро. --- ### 4. Мінімум boilerplate-коду Для зміни стану достатньо викликати `set`: ```javascript const useStore = create((set) => ({ count: 0, inc: () => set((s) => ({ count: s.count + 1 })), })) ``` Без: - екшенів (`type: 'INCREMENT'`); - редьюсерів (`switch/case`); - dispatch. --- ### 5. Проста логіка і доступ до store поза React Zustand-store - це звичайна JS-функція, а отже: - можна використовувати її **поза компонентами React** (наприклад, в утилітах або сервісах); - можна **підписуватися на зміни вручну**, без хуків; - можна **створювати декілька сторів** і імпортувати їх, як звичайні модулі. --- ### 6. Розширюваність через middleware Все залишається простим, але якщо потрібно - можна додати: - `persist` - зберігання стану в localStorage; - `devtools` - інтеграція з Redux DevTools; - `immer` - іммутабельне оновлення стану. Підключається одним рядком: ```javascript import { devtools, persist } from 'zustand/middleware' ``` --- ### Підсумок | Критерій | Zustand | Redux / MobX | |---|---|---| | Boilerplate | мінімальний | високий | | Розмір | ~1 KB | 10-30 KB+ | | Context Provider | не потрібен | часто обов'язковий | | Використання поза React | так | рідко | | Імперативність | проста `set()` | actions/reducers | | Продуктивність | висока | залежить від реалізації |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.