Блог / JavaScript + Ajax / Zustand: Мінімалістичне управління станом в React, яке ви полюбите

Zustand: Мінімалістичне управління станом в React, яке ви полюбите

### Короткий опис Дізнайтеся, як Zustand спрощує управління станом у React. Цей посібник покаже вам, як відмовитися від складного бойлерплейту Redux та громіздкого Context API на користь простого, швидкого та потужного рішення для проєктів будь-якого масштабу.
Вступ Управління станом — один із наріжних каменів будь-якого сучасного застосунку на React. З ростом проєкту передача даних через пропси (prop drilling) стає неефективною, і розробники звертаються до глобальних сховищ стану. Довгий час стандартом де-факто був Redux, але його складність і велика кількість шаблонного коду (boilerplate) часто відлякують. Вбудований Context API є простішим, але може спричиняти проблеми з продуктивністю через непотрібні ре-рендери. І тут на сцену виходить **Zustand** — бібліотека, яка пропонує золоту середину. Вона поєднує в собі простоту хуків, потужність Redux (наприклад, підтримку middleware) та високу продуктивність, уникаючи при цьому його складності. Давайте розберемося, чому Zustand може стати вашим улюбленим інструментом для управління станом. ---
H2: Що таке Zustand?
**Zustand** (з німецької — "стан") — це невелика, швидка та гнучка бібліотека для управління станом, побудована на основі хуків React. Її головна філософія — надати розробнику потужний інструмент з мінімально можливим API та без зайвого коду. На відміну від Redux чи навіть Context API, Zustand не вимагає обгортати ваш застосунок у спеціальні компоненти-провайдери (). Ви просто створюєте своє "сховище" (store) і використовуєте його як звичайний хук у будь-якому компоненті.
H2: Ключові переваги Zustand Чому ж розробники все частіше обирають саме цю бібліотеку?
H3: Неймовірна простота та мінімум коду Забудьте про actions, reducers, dispatchers та selectors. З Zustand ви визначаєте стан та функції для його зміни в одному місці.
**Порівняймо:** для створення простого лічильника в Redux потрібно описати кілька файлів. У Zustand це виглядає так:

import create from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

Все! Ваше сховище готове до використання.
H3: Висока продуктивність "з коробки" Одна з головних проблем Context API — це "проблема зомбі-дитини" (zombie-child problem). Коли оновлюється частина контексту, всі компоненти, що його використовують, ре-рендеряться, навіть якщо вони не залежать від оновлених даних. Zustand вирішує це елегантно. Компоненти підписуються лише на ті частини стану, які їм потрібні. Якщо оновиться інша частина, компонент не буде перемальовуватися.

function Counter() {
  // Цей компонент буде ре-рендеритись ЛИШЕ при зміні 'count'
  const count = useCounterStore((state) => state.count);
  return {count};
}

function Controls() {
  // Цей компонент підписується на функції, які не змінюються,
  // тому він ре-рендериться лише один раз.
  const { increment, decrement } = useCounterStore();
  return (
    <>
      
      
    
  );
}

H3: Гнучкість та розширюваність Хоча Zustand є мінімалістичним, він підтримує **проміжне програмне забезпечення (middleware)**, так само як і Redux. Це дозволяє легко додавати логування, персистентність (збереження стану в localStorage) або інтегрувати інструменти розробника Redux DevTools.
H2: Практичний приклад: список завдань (Todo List) Давайте створимо просте сховище для керування списком завдань.
H3: Крок 1: Встановлення

npm install zustand
# або
yarn add zustand

H3: Крок 2: Створення сховища Створимо файл src/todoStore.js.

import create from 'zustand';
import { persist } from 'zustand/middleware'; // Для збереження в localStorage

let idCounter = 0;

export const useTodoStore = create(
  persist( // Обгортаємо в middleware для персистентності
    (set) => ({
      todos: [],
      addTodo: (text) => set((state) => ({
        todos: [...state.todos, { id: idCounter++, text, completed: false }],
      })),
      toggleTodo: (id) => set((state) => ({
        todos: state.todos.map((todo) =>
          todo.id === id ? { ...todo, completed: !todo.completed } : todo
        ),
      })),
      removeTodo: (id) => set((state) => ({
        todos: state.todos.filter((todo) => todo.id !== id),
      })),
    }),
    {
      name: 'todo-storage', // Ключ для localStorage
    }
  )
);

H3: Крок 3: Використання в компонентах React Тепер ми можемо використовувати цей хук у будь-якому місці застосунку.
**Компонент для відображення списку завдань (TodoList.js):**

import React from 'react';
import { useTodoStore } from './todoStore';

export function TodoList() {
  const todos = useTodoStore((state) => state.todos);
  const { toggleTodo, removeTodo } = useTodoStore();

  return (
    
      {todos.map((todo) => (
        {todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
           toggleTodo(todo.id)}>{todo.text}
          
        
      ))}
    
  );
}

**Компонент для додавання нового завдання (AddTodo.js):**

import React, { useState } from 'react';
import { useTodoStore } from './todoStore';

export function AddTodo() {
  const [text, setText] = useState('');
  const addTodo = useTodoStore((state) => state.addTodo);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text.trim()) return;
    addTodo(text);
    setText('');
  };

  return (
    {handleSubmit}>
      {text} onChange={(e) => setText(e.target.value)} />
      
    
  );
}

Як бачите, код чистий, декларативний і легкий для розуміння. Ми не потребували жодних провайдерів чи складних структур.
H2: Висновок Zustand — це не просто чергова бібліотека для управління станом. Це потужний інструмент, який повертає простоту та задоволення в роботу зі станом у React. Завдяки мінімалістичному API, високій продуктивності та гнучкості, він ідеально підходить як для невеликих пет-проєктів, так і для великих, складних корпоративних застосунків. Якщо ви втомилися від складності Redux або обмежень Context API, обов'язково дайте шанс Zustand. Ви будете приємно здивовані, наскільки легким та елегантним може бути управління станом. Якщо у вас виникли запитання, потрібна консультація чи ви шукаєте розробника для вашого проєкту, не соромтеся звертатися за адресою: **isholegg@gmail.com**. ---
**Ключові слова:** Zustand, React, управління станом, state management, React hooks, альтернатива Redux, Context API, JavaScript, розробка, програмування, легка бібліотека, Zustand туторіал.
**Meta Description:** Втомилися від складного управління станом в React? Відкрийте для себе Zustand — мінімалістичну та потужну альтернативу Redux. Покроковий гайд з прикладами коду для швидкого старту.

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння