Technical Tutorials

Frontend geliştirme dinamikleri içinde state yönetimi, en kritik mimari zorluklardan biri olmaya devam ediyor. Uygulamalar karmaşıklaştıkça, verinin UI bileşenleri üzerinden akış şekli kullanıcı deneyimini belirleyebilir. Orta ve ileri düzey geliştiriciler için farklı state yönetimi desenlerinin inceliklerini anlamak, sadece bir kütüphane seçmekle ilgili değil; ölçeklenebilir, sürdürülebilir ve performanslı bir sistem tasarlamakla ilgilidir.

Bu yazı, basit yerel state'ten karmaşık global depolara kadar uzanan state yönetimi desenleri yelpazesini inceleyerek, doğru iş için doğru aracı seçmenize yardımcı olacaktır.

State Spektrumunu Anlamak

Belirli uygulamalara dalmadan önce, state'i kategorize etmek kritik öneme sahiptir. Her veri global bir depoda yaşamamalıdır. State genellikle iki kategoriye ayrılabilir:

Yerel State (Local State): Tek bir bileşene ait veri (örn. form girdileri, görünürlük değiştirme, yükleme durumları).
Global State (Global State): Birden fazla bileşen veya tüm uygulama boyunca paylaşılan veri (örn. kullanıcı kimlik doğrulama durumu, tema tercihleri, alışveriş sepeti içeriği).

Başlangıç seviyesindeki geliştiricilerin yaptığı en yaygın hata, her şeyi global bir depoya koyarak sistemi aşırı mühendislikle tasarlamaktır. Buna karşılık, ileri düzey geliştiriciler büyük hiyerarşilerde prop-drilling (prop aktarma) ile mücadele etmekte zorlanabilir. Çözüm, bu desenleri etkili bir şekilde dengelemekte yatar.

Desen 1: Container/Component (Kapsayıcı/Bileşen) Deseni

Container/Component deseni (veya Akıllı/Sahte Bileşenler), özellikle React'te temel bir yaklaşımdır. UI mantığını iş mantığından ayırır. Sunumsal bileşenler render işlemlerini ve kullanıcı etkileşimlerini yönetirken, kapsayıcı bileşenler veri çekme ve state güncellemelerini yönetir.

Bu desen basit olsa da, bileşen ağacı derinleştikçe zorlayıcı hale gelebilir ve aşırı prop-drilling'e yol açabilir. Bunu azaltmak için geliştiriciler genellikle daha küçük global state'ler için Context API ile birleştirirler.

Desen 2: Sunucu State'i vs. İstemci State'i

Modern bir paradigma kayması, sunucu state'i (API'den çekilen veri) ile istemci state'i (UI'ya özgü veri) arasında ayrım yapmayı içerir. Geleneksel olarak, her ikisi için de Redux gibi araçlar kullanılırdı. Ancak, React Query veya SWR gibi kütüphaneler sunucu state'ini özel olarak ele almak için ortaya çıktı ve önbelleğe alma, arka plan güncellemeleri ve tekrarları önleme gibi özellikleri hazır olarak sunar.

Örnek: Sunucu State'i için React Query Kullanımı

import { useQuery } from '@tanstack/react-query';

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });

  if (isLoading) return <div>Yükleniyor...</div>;
  if (error) return <div>Bir hata oluştu: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );}

Bu yaklaşım, API çağrıları için manuel state yönetimine kıyasla iskelet kodu (boilerplate) miktarını önemli ölçüde azaltır ve yerel veya global istemci taraflı depolar kullanarak istemciye özgü state'e odaklanmanıza olanak tanır.

Desen 3: Atomik State Yönetimi

Zustand veya Jotai gibi kütüphaneler atomik bir yaklaşımı teşvik eder. Büyük azaltıcılar (reducers) ve eylem türleri tanımlamak yerine, state küçük, bağımsız atomlara veya dilimlere ayrılır. Bu, son derece minimal iskelet kodu ve daha kolay test edilebilirlik sağlar.

Örnek: Zustand ile Basit State

import create from 'zustand';

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

function BearCounter() {
  const bears = useStore((state) => state.bears);
  return <h1>{bears} burada...</h1>;
}

Bu desen, sadelik ve performansın öncelik olduğu modern React uygulamaları için şiddetle tavsiye edilir. Eski Redux desenleriyle ilişkili olan "iskelet kodu vergisini" (boilerplate tax) önler.

Sonuç

State yönetimi için sihirli bir değnek yoktur. Etkili frontend mimarisinin anahtarı, uğraştığınız state türünü tanımaktır. UI'ya özgü konular için yerel state'i, API verileri için sunucu state kütüphanelerini ve paylaşılan istemci state'i için atomik global depoları kullanın. Bu desenleri benimseyerek, sadece işlevsel olmakla birlikte uzun vadede ölçeklenebilir ve sürdürülebilir uygulamalar oluşturabilirsiniz. Körü körüne trendleri takip etmek yerine, ekibinizin becerilerine ve uygulamanızın spesifik ihtiyaçlarına uyan aracı seçin.