Zustand Nedir? Basit, Hızlı, Ölçeklenebilir State Management

Zustand Nedir?

React için küçük, hızlı ve ölçeklenebilir bir state management kütüphanesidir. Reducer/action/dispatch boilerplate'i olmadan; çağrılan bir hook ile state ve setter elde edersiniz.

• Daha az boilerplate
• Minimal setup
• Built-in React desteği
• Hem küçük hem büyük uygulamalar için

Neden Zustand?

Zustand'ın getirdiği avantajlar:

• Provider gerektirmez
• Minimal API
• TypeScript ile yerleşik destek
• React Native API'siyle uyumlu
• Redux'a göre çok daha hafif (small footprint)

Kurulum

Tek paket; runtime bağımlılığı olarak kurulur.

npm install zustand

Bir Store Oluşturma (Temel Fikir)

create fonksiyonu, set'i alan bir factory ile state ve action'ları döndürür. Hook olarak kullanılabilir.

import { create } from "zustand";

type CounterState = {
  count: number;
  increment: () => void;
  decrement: () => void;
};

export const useCounter = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

Store'u Kullanma

Store, doğrudan bir hook'tur. Değer ve action'ları okumak için çağırırsınız; component'i içine sarmaya gerek yok.

function Counter() {
  const { count, increment } = useCounter();
  return (
    <button onClick={increment}>
      Count: {count}
    </button>
  );
}

Selectors (ÖNEMLİ)

Yalnızca ihtiyaç duyduğunuz alanı seçmek için selector geçirin. Bu, sadece o alan değiştiğinde re-render olmasını sağlar — performans için kritiktir.

const count = useCounter((s) => s.count);
const increment = useCounter((s) => s.increment);

Async Actions

Store içinde async fonksiyon tanımlayıp set'i çağırabilirsiniz. Veri çekme, login gibi async işler de doğal akışta yer alır.

export const useUsers = create((set) => ({
  users: [],
  loading: false,
  fetchUsers: async () => {
    set({ loading: true });
    const res = await fetch("/api/users");
    const users = await res.json();
    set({ users, loading: false });
  },
}));

Persist Middleware

persist middleware, store içeriğini localStorage'a yazar. Sayfa yenilense bile state korunur. sessionStorage veya custom storage da kullanılabilir.

import { create } from "zustand";
import { persist } from "zustand/middleware";

export const useTheme = create(
  persist<{ theme: "light" | "dark"; toggle: () => void }>(
    (set) => ({
      theme: "light",
      toggle: () =>
        set((s) => ({ theme: s.theme === "light" ? "dark" : "light" })),
    }),
    { name: "theme" }
  )
);

Temel Kavramlar

Zustand ile sürekli karşılaşacağınız parçalar:

• create — store oluşturmak
• set / get — state güncellemek ve okumak
• selectors — sadece ihtiyacınızı dinlemek
• persist — state'i kalıcı yazmak
• subscriber — store dışında dinlemek
• middleware — devtools, persist, immer vb.

Zustand vs Redux

İkisinin temel farkları:

• Zustand: minimal boilerplate, provider yok, hızlı kurulum
• Redux: action/reducer/dispatch, daha katı yapı, daha fazla setup
• Zustand modern projelerde gittikçe yaygınlaşıyor
• Redux Toolkit, klasik Redux'a göre boilerplate'i azaltır ama yine de ağırdır

Kullanım Alanları

Zustand'ın özellikle parladığı senaryolar:

• Global UI state (theme, modal, sidebar)
• Paylaşılan client state
• Küçük-orta ölçekli uygulamalar
• React Native uygulamaları
• Form draft/auto-save state

Özet

Zustand; basit, hızlı ve performanslıdır. Boilerplate'i minimum tutar, mükemmel geliştirici deneyimi sunar ve modern React uygulamaları için harika bir varsayılan tercihtir. Server state için React Query, client state için Zustand kombinasyonu modern stack'lerde en yaygın görünen ikilidir.