Zustand

Ce este Zustand

Zustand e o librărie mică (~1 KB) pentru state global: un store creat cu o funcție, folosit ca un hook. Fără provider, fără acțiuni de tip string, fără reduceri — doar state și funcții care îl modifică.

import { create } from 'zustand'

type CartState = {
  items: number[]
  add: (id: number) => void
  clear: () => void
}

export const useCart = create<CartState>()(set => ({
  items: [],
  add: id => set(state => ({ items: [...state.items, id] })),
  clear: () => set({ items: [] }),
}))

'use client'
const count = useCart(state => state.items.length)   // selector
const add = useCart(state => state.add)
<button onClick={() => add(product.id)}>Adaugă</button>

Cum funcționează

• create returnează un hook. Store-ul trăiește în afara React-ului; componentele se abonează la el.
• set combină (merge) obiectul nou cu state-ul existent, pe primul nivel — nu trebuie să copiezi tot.
• Componenta se re-randează doar când valoarea întoarsă de selector se schimbă.

Selectorii — cel mai important detaliu

Regula: selectează cât mai puțin; pentru mai multe valori, mai multe apeluri sau useShallow.

Middleware utile

import { persist, devtools } from 'zustand/middleware'

export const useSettings = create<Settings>()(
  persist(
    set => ({ theme: 'light', setTheme: theme => set({ theme }) }),
    { name: 'settings' },                 // cheia din localStorage
  ),
)

Zustand vs Redux Toolkit

Zustand cu Next.js

Un store global de modul e partajat pe server între request-uri. Reguli:

• Folosește store-ul doar în Client Components.
• Nu pune în el date specifice unui user la randarea pe server; pentru asta, creează store-ul per request (createStore + Context) — ghidul oficial descrie pattern-ul.
• Pentru persist, valoarea din localStorage apare abia după hidratare.

Unde stă în FSD

Store legat de o entitate → entities/cart/model/cart-store.ts. Store de UI global → shared/model/ sau slice-ul care îl deține.

Pe scurt

• Zustand = create → hook; set face merge; fără provider.
• Selectori mici; useShallow pentru mai multe valori.
• persist pentru localStorage; în Next doar pe client, atenție la date per user.

Surse oficiale

• Zustand — Introduction
• Zustand — Setup with Next.js
• Zustand — persist middleware