ÖncekiReact, modern web uygulamaları geliştirmek için oldukça popüler bir JavaScript kütüphanesidir. Son dönemde oldukça popüler hale gelmiştir ve Microsoft, Adobe gibi birçok büyük şirket kullanmaktadır.
React Redux ise React tabanlı uygulamalarda durum yönetimi için kullanılan bir JavaScript kütüphanesidir. Redux, özellikle büyük ve karmaşık uygulamalarda durumu merkezi bir şekilde yönetmeyi amaçlar.
En kısa tanımıyla React Redux için “Global durum yönetimi” diyebiliriz.
React ile durum yönetimi için Redux kullanmak yaygın bir tercih olsa da, bazı durumlarda daha hafif ve daha basit bir çözüm arayabilirsiniz. Bu durumda, Zustand gibi alternatif bir durum yönetimi kütüphanesini düşünebilirsiniz.
React Redux’ın, Zustand’a oranla daha fazla kullanılmasının en büyük sebebi Zustand’ın henüz tam olarak tanınmamış olmasıdır.
Zustand Nedir?
Zustand, React uygulamalarında durumu yönetmek için minimalist bir kütüphanedir.
Birinci şahıs bir durum yönetim çözümü olarak, Zustand, React hook’ları kullanarak bileşenlerle doğrudan etkileşime geçer. Bu, durumu merkezi bir depoda değil, bileşenler arasında paylaşılan basit bir şekilde yönetmeyi sağlar.
Zustand, küçük ve orta ölçekli projelerde kullanımı kolay olan bir alternatiftir.
React Zustand Kullanımı
- Zustand Kütüphanesini Ekleyin
npm install zustand
veya
yarn add zustand
- Store’u Oluşturun
Şekil-1 de olduğu gibi Zustand kullanımına başlamak için bir store oluşturmalısınız. Store, durumu içerir ve bu durumu manipüle etmek için işlevler sağlar.
Şekil-1 örneğinde useAuth isminde bir store oluşturduk ve içerisinde username ve isAuthenticated isminde 2 property, login ve changeUsername isminde de 2 metod tanımladık.
Login metodu çağrıldığında username ve isAuthenticated alanları set edilmektedir.
- Bileşenlerde Kullanın
Şekil-2 örneğinde oluşturduğumuz useAuth isimli storu AppContainer isminde bir komponent oluşturduk ve içerisinde kullandık.
Burada dikkat edilmesi gereken kod bloğu:
const isAuthenticated = useAuth((state) => state.isAuthenticated);
Çünkü burada sadece isAuthenticated ismindeki property’yi kullanarak sadece bu property değişiminde AppContainer’ın render olmasını sağladık, diğer bir ifadeyle durumu ayrı parçalara (state slices) böldük, username değişiminde bu komponent render olmayacak, çünkü AppContainer içerisinde kullanılmadı. Bu zustandın en önemli özellikleri arasındadır. Gereksiz render yapmaz ve uygulamanın daha performanslı çalışmasını sağlar.
Şekil-3 zustand’ın sıklıkla yapılan yanlış kullanımına örnek. const auth = useAuth(); şeklindeki kullanımda AppContainer herzaman render olacaktır. Zustand şekil-2 de olduğu gibi durumu ayrı parçalara (state slices) böler, böylece her bileşen, sadece ihtiyacı olan kesimi alarak gereksiz yeniden render işlemlerini önler.
Zustand’ın Avantajları
- Basit Kullanım
- Redux, büyük ve karmaşık uygulamalarda etkili olabilir, ancak küçük projeler için ağır gelebilir.
- Zustand ise küçük ve orta ölçekli projelerde hafif ve basit bir çözümdür. Şekil-1 örneğinde hızlı ve basit bir şekilde store oluşturup şekil-2 de kullandık.
- Kullanım Kolaylığı:
- Redux, aksiyonlar, reducer’lar, middleware’ler gibi bir dizi kavram içerir ve bu nedenle öğrenmesi zaman alabilir.
- Zustand, React hook’ları kullanarak doğrudan bileşenlerle etkileşime geçtiği için daha basit bir kullanım sunar.
- Performans:
- Zustand, doğrudan React hook’larıyla entegre olduğu için daha hızlı bir performans sağlayabilir.
- Redux, aksiyonların ve reducer’ların kullanılması nedeniyle daha fazla katman içerir ve bu da performansı etkileyebilir.
- Geliştirme Süreci:
- Redux, geliştirme sürecini organize etmek için kapsamlı bir yapı sunar.
- Zustand, daha esnek ve sade bir yapıya sahiptir, bu da geliştirme sürecini hızlandırabilir.
Kaynaklar:
- pmndrs. (2023). Zustand: React durum yönetimi. https://github.com/pmndrs/zustand
- React-Redux. (2023). Redux – React. https://react-redux.js.org/
- React. (2023). React – Kullanıcı arayüzleri oluşturmak. https://react.dev/
- TypeScript. (2023). TypeScript – JavaScript’ı ölçeklendiren dil. https://www.typescriptlang.org/
