Zustand State Management
Zustand store, create, selectors, actions, middleware, devtools, persistence
1Що таке Zustand?
Що таке Zustand?
Відповідь
Zustand - це мінімалістична бібліотека state management для React, яка не потребує Provider, на відміну від Redux або Context API. Вона пропонує простий API на основі hooks та функції create(), з дуже малим bundle size (менше 1KB). Zustand дозволяє керувати глобальним станом без архітектурної складності Redux, уникаючи при цьому проблем продуктивності Context API.
2Як створити базовий Zustand store?
Як створити базовий Zustand store?
Відповідь
Функція create() використовується для ініціалізації Zustand store. Вона приймає callback-функцію, яка отримує set і get як параметри, дозволяючи визначити початковий state та actions. Повернений store є React hook, який можна використовувати безпосередньо в компонентах. Цей підхід усуває потребу в boilerplate, такому як action creators чи reducers з Redux.
3Як отримати доступ до state Zustand store в компоненті?
Як отримати доступ до state Zustand store в компоненті?
Відповідь
Store, створений за допомогою create(), повертає React hook, який можна викликати безпосередньо у функціональних компонентах. Цей hook приймає необов'язковий selector для витягування лише потрібної частини state. Без selector він повертає весь state, але це може спричинити непотрібні re-render. Підхід hook-first робить Zustand дуже інтуїтивним для сучасних розробників React.
Яка роль selector у Zustand?
Як уникнути непотрібних re-render за допомогою selector?
+15 питань зі співбесід
Інші теми співбесід React / Next.js
Основи JavaScript
Основи React
React Hooks
Життєвий цикл компонента
React Router
Управління станом з Context
Форми та Controlled Components
Отримання даних та API
React Query (TanStack Query)
Styling & CSS-in-JS
Основи Next.js
TypeScript з React
Data Fetching у Next.js
Server Actions у Next.js
Маршрутизація та Навігація в Next.js
API Routes у Next.js
Metadata & SEO у Next.js
Middleware та Auth у Next.js
Тестування React
Оптимізація продуктивності React
Error Boundaries & обробка помилок
Advanced React Patterns
Розширені можливості Next.js
Розгортання та Продакшн Next.js
Architecture & Design Patterns
React Server Components
Інтернаціоналізація Next.js
React Безпека & Найкращі Практики
Опануй React / Next.js для наступної співбесіди
Отримай доступ до всіх питань, flashcards, технічних тестів, вправ code review та симуляторів співбесід.
Почни безкоштовно