React ekosisteminde uygulama geliştiriyorsanız, er ya da geç o malum soruyla karşılaşırsınız: “State’i nasıl yöneteceğim?” Yıllar boyunca bu sorunun varsayılan ve tartışmasız tek bir cevabı vardı: Redux. Ancak son yıllarda rüzgar yön değiştirdi. “Props drilling” işkencesinden bizi kurtaran Redux, zamanla kendi içinde bir canavara dönüştü. Tam bu noktada sahneye sadeliğiyle parlayan bir Alman harikası çıktı: Zustand (Almanca’da “durum/state” anlamına gelir).

Peki ne oldu da Zustand, yılların Redux’ının tahtını bu kadar kısa sürede salladı? Gelin bu değişimin arkasındaki nedenlere ve React’te modern durum yönetiminin nasıl evrildiğine yakından bakalım.

Redux’ın hakkını yemeyelim; devasa uygulamalarda öngörülebilir bir state yönetimi sağladı. Ancak bu gücün bir bedeli vardı: Boilerplate kod yığınları.

Redux Toolkit bu süreci epey hafifletse de, modern React geliştiricileri (özellikle Hooks mimarisine alıştıktan sonra) daha çevik, daha az kod yazdıran ve React’in doğasına daha uygun araçlar aramaya başladı.

Zustand, ayı formundaki sevimli logosunun aksine oldukça güçlü ve bir o kadar da hafif bir kütüphane. Onu bu kadar popüler yapan temel özellikleri şunlar:

1. Sıfır Boilerplate

Zustand ile bir store oluşturmak kelimenin tam anlamıyla saniyeler sürer. Reducer’lara, dispatcher’lara veya action type’lara ihtiyacınız yoktur.

2. Provider Karmaşasına Son

Zustand kullanırken React uygulamanızı <Provider store={store}> gibi wrapper’lar içine almanıza gerek kalmaz. Hook’lar sayesinde store’a doğrudan, uygulamanın herhangi bir yerinden erişebilirsiniz. Bu da DOM ağacınızı temiz tutar.

3. Kusursuz Performans ve Render Optimizasyonu

Redux’ta state’in bir kısmı değiştiğinde, bağlı olan component’lerin gereksiz yere render olmasını engellemek için ekstra çaba sarf etmek gerekebilir. Zustand ise sadece state’in abone olduğunuz (subscribe) kısmı değiştiğinde render tetikler.

Basit bir sayaç (counter) örneği üzerinden Zustand’ın ne kadar pratik olduğunu görelim.

Store’u Oluşturmak (store/useStore.ts):

  import { create } from 'zustand'
 
  interface CounterState {
    count: number;
    increase: () => void;
    decrease: () => void;
    reset: () => void;
  }
 
  export const useStore = create<CounterState>()((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
    decrease: () => set((state) => ({ count: state.count - 1 })),
    reset: () => set({ count: 0 }),
  }))

Hepsi bu kadar! Ne bir reducer, ne bir action dosyası. Sadece state ve onu değiştirecek fonksiyonları içeren basit bir hook.

Component İçinde Kullanımı (Counter.tsx):

  import React from 'react';
  import { useStore } from './store/useStore';
 
  const Counter = () => {
    const count = useStore((state) => state.count);
    const increase = useStore((state) => state.increase);
    const decrease = useStore((state) => state.decrease);
 
    return (
      <div className="p-4 flex flex-col items-center">
        <h1 className="text-2xl font-bold">Sayaç: {count}</h1>
        <div className="flex gap-2 mt-4">
          <button onClick={increase} className="px-4 py-2 bg-blue-500 text-white rounded">+</button>
          <button onClick={decrease} className="px-4 py-2 bg-red-500 text-white rounded">-</button>
        </div>
      </div>
    );
  };
 
  export default Counter;

Bu sektördeki en tehlikeli cümlelerden biri “X teknolojisi öldü” (PHP artık öldü :D) demektir. Hayır, Redux ölmedi. Milyonlarca satırlık, çok karmaşık state akışlarına sahip dev kurumsal projelerde, Redux’ın devtools entegrasyonu ve katı kuralları hala hayat kurtarıcı olabilir.

Ancak yeni başlayan projelerin %80’i için Redux kullanmak, bakkala gitmek için tır kullanmaya benziyor. Zustand ise tam olarak kapınızın önündeki o hızlı, atik ve park etmesi kolay spor araba.

Eğer hala React, Next.js veya React Native projelerinizde state yönetimi için ne kullanacağınızı düşünüyorsanız ve karmaşadan uzak durmak istiyorsanız, Zustand şu an piyasadaki en modern, en temiz ve öğrenmesi en kolay çözüm.

Bir sonraki projenizde Zustand’a bir şans verin; sadece birkaç dakika içinde kurup kullanmaya başladığınızda Redux’ın tahtının neden sallandığını kendi gözlerinizle göreceksiniz.

Siz projelerinizde state yönetimi için hangi aracı kullanıyorsunuz? Redux’tan vazgeçemeyenlerden misiniz, yoksa Zustand/Jotai gibi modern araçlara geçiş yaptınız mı? Yorumlarda buluşalım!