Ölçeklenebilir React Uygulamalarında Modern State Yönetimi

Frontend uygulamaları büyüdükçe, karmaşık veri akışlarını yönetmek (state management) en büyük zorluklardan biri haline gelir. Eskiden "tüm veriyi Redux store'a koymak" standart bir yaklaşımdı. Ancak modern web mühendisliğinde, veriyi doğasına göre sınıflandırarak yönetmek mimari bir zorunluluktur.

Client State (İstemci Durumu) vs Server State (Sunucu Durumu)

Geliştirdiğim yüksek trafikli Fintech ve e-ticaret (B2C/B2B) platformlarında uyguladığım en kritik kural bu ayrımı yapmaktır.

1. Server State (Sunucu Durumu): API'den gelen verilerdir (Kullanıcı profili, ürün listesi, banka işlemleri). Senkronizasyon, önbellekleme (caching) ve bayatlama (stale-time) yönetimi gerektirir.
2. Client State (İstemci Durumu): Sadece tarayıcıda yaşayan verilerdir (Modal'ın açık/kapalı olması, karanlık mod, seçilen tab).

Server State İçin: TanStack Query (React Query)

Sunucu verilerini Redux içinde tutmak, gereksiz "boilerplate" kod yazımına ve senkronizasyon hatalarına yol açar. TanStack Query, bu yükü tamamen üzerimizden alır.

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

function useTransactions() {
  return useQuery({
    queryKey: ["transactions"],
    queryFn: async () => {
      const res = await fetch("/api/transactions");
      return res.json();
    },
    staleTime: 1000 * 60 * 5, // 5 dakika boyunca tekrar istek atma
  });
}