Ne zaman store gerekir

Önce State'i Sınıflandırın

Global bir store açmadan önce verinin hangi türe girdiğine bakın. Çoğu veri bir store'a hiç ihtiyaç duymaz:¹²

TkDodo bunu kendi deneyimiyle anlatır: uygulamalardaki state'in çoğu ya sunucu ya da URL state'idir. İki Zustand store'unu birleştirmekten çok bir store'u useQuery ya da useParams ile birleştirdiğini söyler.³ TanStack Query dokümanı da aynı gözlemi yapar: sunucu verisi kendi aracına taşındığında global store'da çoğu zaman yalnızca tema ve kenar çubuğu gibi birkaç değer kalır.⁴

Local State Yeterken

İki kardeş component aynı değere ihtiyaç duyuyorsa önce state'i en yakın ortak ebeveyne taşıyın (bkz. State).⁵ Değer birkaç seviye aşağı iniyorsa React dokümanı Context'ten önce iki şey önerir: props ile devam etmek ya da ara component'lere children vermek.⁶

Store şu belirtiler varsa anlamlıdır:

• Aynı client state'i ağacın birbirinden uzak yerleri okuyor ve değiştiriyor (header'daki sepet sayısı, ürün kartındaki "Sepete ekle", yan paneldeki sepet listesi).

• Değer sık değişiyor ve onu okuyan component'lerin yalnızca bir kısmı her değişiklikte render olmalı.

• State'i React dışından da okumak ya da değiştirmek istiyorsunuz (bir WebSocket dinleyicisi, bir test).

Context Neden Her Zaman Yetmez

Context bir değeri taşır, state yönetmez. Provider'ın value'su değişince onu okuyan tüm component'ler render olur; bir component değerin yalnızca bir parçasıyla ilgileniyor olsa bile.⁷ Seyrek değişen tema ya da oturum bilgisi için bu sorun değildir. Her tıklamada değişen bir sepet ya da çok seçimli bir liste için yavaşlık yaratabilir.

TkDodo, Context'i değerin kendisi için değil, store gibi değişmeyen bir örneği paylaşmak için kullanmayı önerir. Değer seçimini store'un selector'ları yapar.⁸ Bu kalıp Context ile store dersinde.

Zustand Nedir

Zustand küçük, hook tabanlı bir client state kütüphanesidir. Store'unuz bir hook'tur; Provider gerekmez. Component, selector ile store'un yalnızca ihtiyaç duyduğu parçasını okur ve yalnızca o parça değiştiğinde render olur:⁹

import { create } from "zustand";

type CartState = {
  count: number;
  increase: () => void;
};

export const useCartStore = create<CartState>()((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

// Bir component'te:
const count = useCartStore((state) => state.count);

Kütüphane, Poimandres (pmndrs) topluluğunun bir projesidir. Bugünkü maintainer'ı Daishi Kato projeyi 2020'de bakımsız kaldığı bir dönemde devraldı. Tasarım ilkesini şöyle özetler: global state React Context'in dışında durur, Context gerekirse yalnızca store'u taşır; uygulama basit ve bundle küçük kalır.¹⁰

Güncel sürüm v5'tir. v5 yeni özellik getirmedi; v4'te kullanımdan kaldırılmış API'leri sildi, en az React 18 ve TypeScript 4.5 istedi ve React'in yerleşik useSyncExternalStore'una geçti.¹¹¹² Eski bir yazıda import create from "zustand" (default export) ya da selector'ın yanında shallow görürseniz v4 kodudur.

Diğer Kütüphanelerden Farkı

Zustand dokümanı kendini benzer kütüphanelerle karşılaştırır. Fark iki eksende:¹³

Zustand, Redux'a kavramsal olarak en yakın olandır; daha az kod ve Provider'sız kullanım sunar. TkDodo kendi tercihini şöyle anlatır: Zustand "sihirli" değildir, hangi alanı kullandığınızı izlemez; selector'la açıkça abone olursunuz. Bu, uygulama büyüdükçe bağımlılıkları görünür kılar.³

Kendin Dene

• Üzerinde çalıştığınız bir uygulamanın state'ini yukarıdaki dört türe ayırın. Paylaşılan client state'e kaç değer kalıyor?

• Bir sepet sayacını önce ortak ebeveynde useState ile, sonra Context ile yazın. Sepete ürün eklerken hangi component'lerin render olduğunu React DevTools'un "Highlight updates" seçeneğiyle izleyin.

Detaylı Öğrenmek İçin

• Yazı: TkDodo, "Working with Zustand"; Zustand'ı neden seçtiği ve store'u küçük tutma önerisi.³

• Yazı: Daishi Kato, "How Zustand was born"; projenin geçmişi ve Context dışında global state fikri.¹⁰

• Resmi doküman: "Comparison"; Redux, Valtio, Jotai ve Recoil ile kod karşılaştırması.¹³