REACT QUERY İLE SERVER STATE YÖNETMEK VE CACHE STRATEJİSİ KURMAK

Modern React projelerinde en büyük karmaşa, “state nerede durmalı?” sorusuyla başlar. Özellikle API’den gelen veriler arttıkça; loading, error, tekrar fetch, cache ve senkronizasyon problemleri kodu hızla büyütür. İşte tam bu noktada React Query ile server state yönetmek, uygulamanın sürdürülebilirliğini belirgin şekilde artırır.

Server state ile client state aynı şey değildir. Form input değeri, modal açık mı kapalı mı gibi veriler client state’tir. API’den gelen ürün listesi, kullanıcı profili veya dashboard verileri ise server state olarak düşünülmelidir. Bu ayrımı doğru yapmak, mimariyi sadeleştirir.

Bu yazıda React Query mantığını, cache stratejisi kurmayı, stale time ve refetch davranışlarını, mutation akışını ve performans optimizasyonunu adım adım ele alacağız. Konuyu uygulamalı şekilde ilerletmek için react eğitimi içeriklerine de göz atabilirsiniz.

Server state kavramını netleştirmek ve ayırmak

React Query’nin gücü, server state’i client state’ten ayırmasından gelir. Server state; uzakta tutulur, asenkron gelir, değişebilir ve çoğu zaman birden fazla bileşen tarafından kullanılır. Bu özellikler, klasik useEffect + useState yaklaşımını yetersiz bırakır.

Server state ile client state farkını anlamak ve konumlandırmak

Client state genellikle lokal ve senkron davranır. Server state ise asenkron, paylaşılan ve cache’lenebilir yapıdadır. Bu yüzden React Query, loading, error, retry, background refetch gibi mekanizmaları hazır sunar.

Veri akışını merkezi hale getirmek ve tekrarları azaltmak

Aynı endpoint’i farklı bileşenlerde tekrar tekrar fetch etmek yerine, query key üzerinden merkezi cache kullanmak; gereksiz ağ trafiğini azaltır ve performansı iyileştirir.

Query key kurgulamak ve ölçeklenebilir yapı kurmak

React Query’de her sorgu bir query key ile tanımlanır. Bu key, cache’in temel kimliğidir. Yanlış kurgulanmış query key; yanlış cache paylaşımına veya gereksiz invalidation’a yol açabilir.

Dinamik parametreleri anahtara dahil etmek ve ayrıştırmak

Örneğin ürün listesi için kategori ve sayfa numarası varsa, query key bu parametreleri içermelidir. Böylece her kombinasyon ayrı cache kaydı olarak tutulur.

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

function useProducts(category, page) {
  return useQuery({
    queryKey: ["products", category, page],
    queryFn: () => fetchProducts(category, page),
    staleTime: 1000 * 60,
  });
}

Query key standardı belirlemek ve ekip içinde yaymak

Key’leri string + parametre dizisi şeklinde standartlaştırmak, büyük projelerde tutarlılık sağlar. Örneğin: ["users", id], ["orders", { status, page }] gibi net bir şablon belirlenmelidir.

Cache stratejisi kurmak ve stale time yönetmek

Cache stratejisi, React Query kullanımının en kritik kısmıdır. Verinin ne kadar süre “taze” kabul edileceği, arka planda ne zaman refetch edileceği ve ne zaman invalidation yapılacağı performansı doğrudan etkiler.

Stale time belirlemek ve gereksiz refetch azaltmak

staleTime, verinin ne kadar süre güncel sayılacağını belirler. Örneğin dashboard verisi 5 dakika değişmiyorsa, her sekme değişiminde yeniden fetch etmek gereksizdir.

Cache time ayarlamak ve bellek kullanımını kontrol etmek

cacheTime, kullanılmayan sorgunun bellekte ne kadar tutulacağını belirler. Büyük veri setlerinde cacheTime’ı bilinçli ayarlamak, performans açısından önemlidir.

Mutation akışını tasarlamak ve optimistic update uygulamak

Server state sadece okunmaz; yazılır da. Ürün ekleme, güncelleme veya silme işlemleri mutation ile yapılır. Mutation sonrası cache invalidation veya optimistic update tercih edilebilir.

Invalidate etmek ve veriyi yeniden senkronize etmek

Mutation tamamlandıktan sonra ilgili query key invalid edilir. Böylece veri yeniden fetch edilir ve UI güncellenir. Bu yöntem basit ve güvenlidir.

Optimistic update kurgulamak ve kullanıcı deneyimini hızlandırmak

Optimistic update, kullanıcı aksiyonu sonrası UI’ı anında günceller; ardından sunucu yanıtını bekler. Hata durumunda geri alma (rollback) mekanizması gerekir. Bu yaklaşım, etkileşim hissini güçlendirir.

import { useMutation, useQueryClient } from "@tanstack/react-query";

function useAddProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: addProduct,
    onSuccess: () => {
      queryClient.invalidateQueries(["products"]);
    },
  });
}

Background refetch ve otomatik senkronizasyon yönetmek

React Query, pencere odaklandığında veya ağ bağlantısı geri geldiğinde otomatik refetch yapabilir. Bu özellik, veri tutarlılığını artırır; ancak bazı projelerde kontrol edilmesi gerekir.

Refetch on window focus davranışını ayarlamak ve dengelemek

Varsayılan davranış, sekmeye geri dönüldüğünde veriyi yenilemektir. Ancak yüksek trafikli uygulamalarda bu durum gereksiz yük oluşturabilir. Bu ayar bilinçli şekilde konfigüre edilmelidir.

Polling stratejisi belirlemek ve gerçek zaman ihtiyacını değerlendirmek

Gerçek zamanlı veri gerekiyorsa polling veya websocket tercih edilir. Polling interval’ı makul aralıkta tutulmalı; her saniye istek atmak yerine iş ihtiyacına göre süre belirlenmelidir.

Performans analizi yapmak ve gereksiz render azaltmak

React Query, cache sayesinde aynı veriyi tekrar tekrar fetch etmez; ancak bileşen yapısı yanlışsa gereksiz render görülebilir. select ve memoization bu noktada önemlidir.

Select özelliğini kullanmak ve alt veri türetmek

select ile sorgu sonucundan sadece gerekli alanı türeterek bileşenin daha az veriyle çalışmasını sağlayabilirsiniz. Bu yaklaşım, büyük veri setlerinde performansı iyileştirir.

Devtools ile cache davranışını izlemek ve ölçmek

React Query Devtools, sorguların durumunu, stale olup olmadığını ve kaç kez fetch edildiğini gösterir. Bu araç, cache stratejisinin doğruluğunu test etmek için oldukça değerlidir.

Sonuç olarak, React Query ile server state yönetmek; veri akışını sadeleştirir, cache stratejisi ile performansı artırır ve karmaşık useEffect zincirlerini ortadan kaldırır. Doğru query key kurgusu, bilinçli staleTime ayarı ve planlı mutation stratejisi; ölçeklenebilir React projelerinin temelini oluşturur.