Які бібліотеки менеджменту стану React-застосунку ви знаєте? Навіщо вони?

Повне пояснення

Що це і навіщо

• Redux – бібліотека для управління глобальним станом, що базується на патерні Flux. Вона забезпечує односторонній потік даних, що робить логіку передбачуваною і легко тестованою.
• Zustand – мінімалістичний state‑manager, який використовує React hooks. Він не потребує actions чи reducers і дозволяє швидко створювати локальні та глобальні стейти.
• Recoil – бібліотека від Facebook, що вводить концепцію атомів (state) і селекторів (derived state). Вона інтегрується з React безпосередньо, підтримує асинхронні запити і кешування.

Ключові принципи/терміни

• Store – централізований контейнер для стану.
• Actions / Reducers (Redux) – описують, як змінюється стан.
• Atoms / Selectors (Recoil) – базові одиниці даних і обчислювані значення.
• Hooks (Zustand, Recoil) – useStore, useAtom.

Як це працює

• Redux: компонент викликає dispatch(action), reducer повертає новий state, store оновлюється, підписані компоненти перерендерюються.
• Zustand: створюється store через create(set => ({ count: 0, inc: () => set(state => ({ count: state.count + 1 })) })). Компонент підписується через useStore(state => state.count).
• Recoil: атом створюється через atom({ key: 'count', default: 0 }). Компонент використовує useRecoilState(atom).

Практика і реалізація

// Redux slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: { increment(state) { state.value += 1; } }
});

// Zustand store
const useStore = create(set => ({ count: 0, inc: () => set(state => ({ count: state.count + 1 })) }));

// Recoil atom
const counterAtom = atom({ key: 'counter', default: 0 });

Тестування

• Redux – тестуємо reducer окремо, mock dispatch.
• Zustand / Recoil – використовуємо renderHook з React Testing Library.

Особливості в контексті React

• Redux підходить для великих застосунків з багатьма взаємодіями.
• Zustand і Recoil краще для швидкого прототипування або середніх проектів, де потрібна мінімальна boilerplate.

Оптимізація та типові помилки

• У Redux слід уникати мутування state.
• В Zustand треба обмежувати кількість підписок, щоб не перерендерювати занадто часто.
• Recoil потребує унікальних ключів атомів, інакше виникає конфлікт.

Диагностика

• Якщо state не оновлюється: перевірте, чи підписані компоненти (useSelector/useStore).
• Якщо виникає “Too many renders”: перевірте, чи не викликається state‑setter у циклі.

Альтернативи

• MobX – реактивний state manager з мінімальним кодом.
• React Query – для управління асинхронними даними, але не глобальним станом.

Часті помилки (8)

1. Мутування state в Redux.
2. Відсутність key у Recoil атомах.
3. Перенавантаження store в Zustand через занадто багато підписок.
4. Використання useEffect для оновлення state без dependency array.
5. Необхідність Provider у Redux/Recoil, але його пропущено.
6. Відсутність default у Zustand store.
7. Перевантаження компонентів через занадто глибокі connect.
8. Необхідність useCallback для функцій, що передаються як пропси.

Cheatsheet

• Redux: createStore, Provider, useSelector, useDispatch.
• Zustand: create, useStore.
• Recoil: atom, selector, useRecoilState, useRecoilValue.