Photo by Aaron Burden on Unsplash

REACT STATE MANAGEMENT

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

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

Önceki yazılarda https://onurdayibasi.com/react-redux/ altında ClientState Management ile ilgili useState, useContext, Zustand ve Jotai ve Redux Connect konularından bahsettim.

Bu yazıda ise Prereact ekibinin Reactive Programlama çabası ile ortaya attığı aynı zamanda React içerisinde de kullanılabilen bir State yönetim aracından bahsedeceğiz Signals. Kendi tabiri ile ;

Signals are reactive primitives for managing application state.

Not: Reactive Programlama konusuna Svelte Nedir? blog yazısı içerisinde React programlama mantığından nasıl farklar içerdiğini anlatan bir blog paylaşmıştım.

Burada Jotai’ye çok benzer bir yapı var . Örneğin … İlk oluşturum sırası

Jotai

//Jotai
import { atom } from 'jotai';

export const count1Atom = atom(0);
export const count2Atom = atom(0);

Signals

//Signals
import { signal } from "@preact/signals-react";

export const count1Signal = signal(0);
export const count2Signal = signal(0);

Sonrasında kullanım sırasında Jotai göre çok ufak farklar içeriyor. Jotai useAtom ile içerisinden setter ve getter elde ederken..

Jotai

export const IncBtn2 = props => {
  const [count2, setCount2] = useAtom(count2Atom);
  return (
      <button onClick={() => setCount2(count2 + 1)}>Inc2</button>
  );
};

export const ValueDisp2 = () => {
  const [count2] = useAtom(count2Atom);
  return (
      <span style={{ backgroundColor: 'red' }}>{count2}</span>
  );
};

Signals

Signal’da bir getter setter çıkarma ihtiyacı olmadığı için kodun daha temiz yazıldığını görebilirsiniz.

export const IncBtn2 = props => {
  return (
      <button onClick={() => count1Signal.value++}>Inc2</button>
  );
};

export const ValueDisp2 = () => {
  return (
      <span style={{ backgroundColor: 'red' }}>{count2Signal.value}</span>
  );
};

RENDERİNG

Gelelim örnek State Management altyapı örneğimize , bu örnek içerisinde uzaktaki bileşenlerin ortak bir State üzerinden birbirine tetiklemesini ve Ara bileşenlerin render edilmemesini bekliyoruz.

Inc1 düğmesi sadece C1 bileşenin rendering kısmında tetikleme gerçekleştiriyor.

https://onurdayibasi.dev/state-signals

Signals kütüphanesi pure reactive olması, Inc için bir önceki değere kullanırken rendering ihtiyaç duymadan sadece ValueDisp kısmını render ediyor olması Jotai göre daha performanslı bir çalışma sağlıyor. Zustand ile benzer.

Fakat Signals kütüphanesinin API’si içerisinde bu State yönetebilmek için signal harici 3 tane daha fonksiyon bulunuyor.

• computed(fn): Diğer sinyallerin değerlerine göre hesaplanan yeni bir sinyal oluşturur. Döndürülen hesaplanmış sinyal değiştirilemez sadece değeri okunabilir ve değeri, buna bağlı herhangi bir sinyal değiştiğinde otomatik olarak güncellenir.
• effect(fn): aynı react useEffect olduğu gibi sinyallare bağlı değişiklikler olduğunda bunları yakalamanızı sağlayan callback fonsiyonları bağlayabilmenizi sağlar. useEffect gibi bağımlılık belirtmeden içerisinde kullandığınız signal üzerinden çıkarım gerçekleştirir.
• batch(fn): Toplu şekilde degerler üzerine değişiklik yapıp, bunun cevabı üzerine bir alt kümede ki değerler üzerinde tekrar değişiklik yapma ihtiyacınız olabilir.

Okumaya Devam Et 😃

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