Ответ
Zustand — это легковесная библиотека для управления состоянием в React-приложениях. Она использует хук useSyncExternalStore и предоставляет простой API, похожий на MobX или Redux, но без лишнего бойлерплейта.
Ключевые особенности:
- Минимальный API (create, set, get)
- Не требует оберток (Provider)
- Поддержка middleware (например, для devtools)
- Оптимизированная перерисовка (компоненты обновляются только при изменении нужных данных)
Пример:
import { create } from 'zustand';
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
function Counter() {
const { count, increment } = useStore();
return <button onClick={increment}>{count}</button>;
}Ответ 18+ 🔞
Слушай, а есть такая библиотека для Реакта — Zustand. Ну, понимаешь, чтобы состояние приложения хранить, как тот же Redux, только без этого вот всего, блядь, цирка с конями: оберток, провайдеров, диспатчей, экшенов — этой всей хуйни, от которой мозг вытекает.
Что за зверь такой, нахуй?
По сути, это такая легковесная хуйня, которая внутри использует хук useSyncExternalStore. Представь себе — как будто взяли MobX и Redux, скрестили, но выкинули 90% boilerplate'а, оставив только самое соковое. И работает, сука, как часы.
Чем хорош-то, спросишь?
- API — проще некуда, ёпта. Три основные функции:
create,set,get. Выучил за минуту — и уже царь и бог состояния. - Никаких провайдеров, блядь! Не нужно оборачивать всё приложение в
<Provider store={store}>. Создал стор — и тут же в компоненте юзаешь. Во все дыры давалка, одним словом. - Мидлвары прикрутить можно. Хочешь девтулзы — пожалуйста. Хочешь логировать каждое изменение — нет проблем, подключай.
- Оптимизации на уровне. Компоненты перерисовываются только тогда, когда меняются именно те данные, которые они используют. Никаких лишних рендеров, всё чётко, блядь.
Ну и где пример, пизда бородавчатая? Держи, смотри, как всё примитивно:
import { create } from 'zustand';
// Создаём стор — и всё, пиздец, готово.
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
function Counter() {
// Берём из стора ровно то, что надо. Ничего лишнего.
const { count, increment } = useStore();
return <button onClick={increment}>{count}</button>;
}Вот и вся магия, ёбушки-воробушки. Никакой магии, никакой сложной философии. Написал логику, навесил на интерфейс — и работает, сука. Иногда лучшие вещи — самые простые.