React Context проти Zustand: коли і що використовувати
Розробники часто припускаються однієї помилки зі станом React. Вони неправильно використовують Context, а потім звинувачують Context у проблемах із продуктивністю.
Проблема зазвичай полягає в одному великому об'єкті контексту. Коли значення в цьому об'єкті змінюється, кожен компонент, що використовує цей контекст, перерендериться. Навіть якщо компоненту потрібна лише одна маленька частина даних, він все одно реагує на кожну зміну в об'єкті.
Якщо ваші сповіщення оновлюються кожні 30 секунд, ваш Navbar перерендериться, навіть якщо Navbar цікавить лише ім'я користувача. Це вбиває продуктивність.
Ви можете виправити це без сторонніх бібліотек. Розділіть свої контексти залежно від того, як часто вони змінюються.
Замість одного великого контексту використовуйте кілька: • UserContext для даних користувача • UIContext для стану сайдбару • NotificationContext для сповіщень
Тепер ваш Navbar перерендериться лише тоді, коли зміняться дані користувача. Такий простий поділ вирішує більшість скарг на продуктивність.
Використовуйте React Context для стабільних значень: • Теми • Статус авторизації • Налаштування мови
Context також добре працює з Server Components. Zustand працює лише на стороні клієнта.
Використовуйте Zustand, коли вам потрібні вибіркові підписки. Zustand дозволяє компонентам підписуватися на конкретні частини (slices) стану. Якщо одна частина вашого стору змінюється, перерендериться лише те компоненти, які стежать саме за цією частиною.
Дотримуйтесь цієї логіки для нового стану:
Використовуйте React Context, якщо: • Дані є стабільними (тема, авторизація, локаль). • Вам потрібно, щоб це працювало з SSR або Server Components. • Ви хочете уникнути prop drilling, розділивши контексти.
Використовуйте Zustand, якщо: • Дані часто змінюються. • Компонентам потрібно стежити за конкретними частинами стану. • Ваша логіка складна.
Зачекайте. Не використовуйте ні те, ні інше для даних з API. Якщо ви отримуєте дані з сервера, використовуйте TanStack Query. Context і Zustand не займаються кешуванням або фоновим оновленням даних.
Підсумок: • Один великий об'єкт контексту спричиняє перерендери. Розділіть його. • Використання Zustand для стабільних значень є надмірним. • Використання Context для частих змін спричиняє затримки. • Використання Zustand для серверного стану — це неправильний інструмент.