Photo by Hassan Pasha on Unsplash

REACT STATE MANAGEMENT

Hangi Client State Management Yöntemi’ni Kullanmalıyım ? (Zustand)

Bu yazıda Client State Management için hangi yöntemleri kullanabilirim üzerine araştırma yaptım. (useState, useContext, redux, zustand, jotai, …) avantajı, dezavantajı için küçük bir deneme ortamı oluşturup bunun üzerinde denemeler yaptım.

Bu yazı serimizin 3ncü yazısı. Özet olması açısından ilk yazıda ortak paylaşımlı kullanılacak count1 ve count2 state Lifting State Up yöntemi ile sayfa seviyesine taşıyıp bunu useState ve Props Drilling yöntem ile alt bileşenlere ulaştırmıştık ama arada konu ile ilgili olmayan bileşenlere de dokunak zorunda kaldık. Bu onlarında ekstradan props taşımasına ve ekstradan bileşenlerin re-render edilmesine sebep olmuştu.

2nci yazımız ise bu prop taşıma yönteminden kurtulmak için React.createContext üzerinden Context oluşturma ve bu context üzerinden sadece ilgili bileşenlere ulaştırmayı denedik. Context oluşturduğumuz kısımda Multiple Context Wraplama(Sarmallama) karmaşıklığı ve ilgili bileşenlerin sadece kendi contextleri ile ilgilendiği durumda bile başka contextlerden gelen güncellemerin rendering etkilemesi ekstra Memoization gereksinimi Context’in de tam istediğimiz sonucu vermediğini belirtmiştik.

Bu yazıda ise Redux benzeri Flux Pattern kullanan Zustand State Management kütüphanesini kullanarak aynı Playground oluşturalım (Linki)

Zustand Playground

Bunda da 2 farklı Counter için 2 redux benzer slice oluşturalım…

import create from 'zustand'

export const useCounter1Slice = create((set) => ({
  count1: 0,
  increase: () => set((state) => ({ count1: state.count1 + 1 })),
}))


export const useCounter2Slice = create((set) => ({
    count2: 0,
    increase: () => set((state) => ({ count2: state.count2 + 1 })),
  }))

Ve sadece bu Slice içeriğine ihtiyaç duyduğumuz yerlerde bu Slice import edip kullanıyoruz.

ValueDisp:

export const ValueDisp1 = () => {
    const count1 = useCounter1Slice((state) => state.count1)
    return (
        <Square size={50} color="pink" title="C1">
            <span style={{ backgroundColor: 'red' }}>{count1}</span>
        </Square>
    );
};

Trigger:

export const IncBtn1 = props => {
    const inc = useCounter1Store((state) => state.increase)
    return (
        <Square>
            <button onClick={inc}>Inc1</button>
        </Square>
    );
};

Bunun dışındaki bileşenler bu yapılardan habersiz ve hiç etkilenmiyor.

RENDERİNG

Inc1 düğmesine tıkladığımda tam da istediğimiz gibi sadece etkilenen C1 bileşeni Render oldu. Hiç bir Memoization kullanmama gerek kalmadı.

Sonuç: Zustand ilk 3 yazıda incelediğim kütüphaneler içerisinde istediğim temel özelliklerde rendering performansı ve kod yazım şeklini en iyi sağlayan State Management kütüphanesi oldu.

Not: Bir sonraki yazımızda Jotai ile ilgili yaptığımız playground ortamını açıklamaya çalışacağım.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.