React Projelerinde Tanstack Query İle Sunucu Durumu Nasıl Yönetilir?

React Projelerinde Tanstack Query İle Sunucu Durumu Yönetimi

Modern web uygulamalarında kullanıcı deneyimini belirleyen en kritik faktörlerden biri, sunucu ile istemci arasındaki veri akışının ne kadar verimli yönetildiğidir. React projelerinde geleneksel yöntemlerle sunucu durumunu (server state) yönetmek; karmaşık useEffect kancaları, manuel yükleme durumları ve önbellekleme zorlukları nedeniyle geliştiriciler için ciddi bir yük oluşturur. Tanstack Query, bu süreci standartlaştırarak verilerin senkronizasyonu, önbelleğe alınması ve güncellenmesi işlemlerini merkezi bir yapıya kavuşturur.

2026 yılı itibarıyla, büyük ölçekli React projelerinde sunucu durumunu yönetmek için en güvenilir yöntem, Tanstack Query kütüphanesinin sunduğu deklaratif yaklaşımdır. Bu rehberde, sunucu verilerini uygulamanızın yaşam döngüsüne nasıl entegre edeceğinizi, veri tutarlılığını nasıl sağlayacağınızı ve performans darboğazlarını nasıl aşacağınızı adım adım inceleyeceğiz.

Tanstack Query Nedir ve Neden Gereklidir?

Tanstack Query, sunucudan gelen verileri asenkron olarak yönetmenizi sağlayan güçlü bir veri senkronizasyon kütüphanesidir. Geleneksel "fetch" işlemlerinde veriyi alıp bir state içine koymak, verinin güncelliğini yitirmesine veya gereksiz ağ isteklerine yol açar. Tanstack Query ise bu süreci arka planda otomatikleştirir.

Sunucu Durumu ile İstemci Durumu Arasındaki Farklar

Sunucu durumu, kontrolünüz dışında olan ve zamanla değişebilen verilerdir (veritabanı kayıtları, API yanıtları). İstemci durumu ise kullanıcının o anki etkileşimine bağlıdır (açık/kapalı menüler, form girdileri). Tanstack Query, özellikle sunucu durumunu yönetmek için tasarlanmıştır. İstemci durumunu ise Context API veya Redux gibi araçlara bırakmak, mimari açıdan en temiz yaklaşımdır.

Temel Avantajları ve Performans Kazanımları

• Otomatik Önbellekleme: Veriler bir kez çekildiğinde, aynı veriye ihtiyaç duyulduğunda ağ isteği yapmadan doğrudan önbellekten sunulur.
• Arka Plan Güncelleme: Kullanıcı uygulamayı yeniden odakladığında veya ağ bağlantısı geri geldiğinde, veriler otomatik olarak tazelenir.
• Yükleme ve Hata Yönetimi: Her sorgu için ayrı ayrı "loading" veya "error" state'leri tanımlamanıza gerek kalmaz; kütüphane bunları hazır sunar.

Tanstack Query Kurulumu ve Yapılandırma

React projenizde Tanstack Query kullanmaya başlamak için öncelikle gerekli paketleri yüklemeniz ve uygulamanızı bir sağlayıcı (provider) ile sarmalamanız gerekir. Bu adım, uygulamanın tamamında verilerin yönetilebileceği merkezi bir önbellek deposu oluşturur.

Proje Entegrasyonu ve QueryClient Yapılandırması

1. Terminal üzerinden @tanstack/react-query paketini projenize dahil edin.
2. Uygulamanızın kök dizininde (genellikle main.tsx veya index.tsx) QueryClient nesnesini oluşturun.
3. QueryClientProvider bileşenini kullanarak tüm alt bileşenlerin bu istemciye erişmesini sağlayın.

Kritik Uyarı: QueryClient yapılandırmasında varsayılan ayarları (staleTime, gcTime) projenizin ihtiyaçlarına göre özelleştirin. Varsayılan olarak staleTime 0'dır, bu da her isteğin anında "eski" kabul edilip tekrar tazelemek için tetikleneceği anlamına gelir.

useQuery ile Veri Çekme İşlemleri

useQuery kancası, sunucudan veri çekmek için kullanılan temel yapıdır. Bir sorgunun benzersiz bir anahtara (queryKey) sahip olması gerekir. Bu anahtar, Tanstack Query'nin veriyi önbellekte nasıl saklayacağını ve ne zaman güncelleyeceğini belirleyen kimlik kartıdır.

QueryKey Kullanımında Dikkat Edilmesi Gerekenler

QueryKey, bir dizi (array) formatında olmalıdır. Eğer sorgunuz bir parametreye (örneğin kullanıcı ID'si) bağlıysa, bu parametreyi anahtarın bir parçası yapmalısınız:

• ['users']: Tüm kullanıcıları temsil eder.
• ['users', userId]: Belirli bir kullanıcıyı temsil eder.

Loading ve Error Durumlarının Yönetimi

useQuery size isLoading, isError, data ve error gibi nesneler döndürür. Bu değerleri kullanarak kullanıcıya anlamlı geri bildirimler verebilirsiniz. Örneğin, veri yüklenirken bir iskelet (skeleton) ekranı, hata durumunda ise kullanıcıya hata mesajı göstermek oldukça kolaydır.

Veri Mutasyonu: useMutation ile Sunucu Güncelleme

Veri çekmenin yanı sıra, sunucuya veri göndermek veya mevcut veriyi değiştirmek için useMutation kullanılır. Form gönderimleri, silme işlemleri veya güncelleme istekleri için bu kanca tercih edilmelidir.

İyimser Güncelleme (Optimistic Updates)

Kullanıcı bir butona bastığında sunucudan yanıt gelmesini beklemeden arayüzü güncellemek, uygulamanın çok daha hızlı hissetmesini sağlar. onMutate fonksiyonu ile mevcut önbelleği manuel olarak güncelleyebilir, hata durumunda ise eski veriye geri dönebilirsiniz.

Invalidation (Geçersiz Kılma) Stratejisi

Bir mutasyon başarıyla tamamlandığında, sunucudaki verinin değiştiğini biliyorsunuz demektir. Bu durumda, ilgili verinin önbelleğini queryClient.invalidateQueries metodu ile geçersiz kılarak uygulamanın en güncel veriyi tekrar çekmesini tetiklemelisiniz.

İleri Seviye Stratejiler ve Optimizasyon

Projeniz büyüdükçe, sadece veri çekmek yeterli olmayacaktır. Performansı artırmak için önbellek politikalarını optimize etmeniz ve arka plan işlemlerini yönetmeniz gerekir.

StaleTime ve GcTime Ayarlarının Önemi

staleTime, verinin ne kadar süre "taze" kabul edileceğini belirler. Eğer veriniz sık değişmiyorsa (örneğin bir kategori listesi), bu süreyi 5-10 dakika tutmak ağ trafiğini ciddi oranda azaltır. gcTime (eski adıyla cacheTime) ise kullanılmayan verilerin önbellekten ne zaman silineceğini belirler.

Prefetching (Önceden Yükleme)

Kullanıcının bir sonraki sayfaya gideceğini tahmin ediyorsanız (örneğin bir liste öğesinin üzerine gelindiğinde), prefetchQuery kullanarak veriyi arka planda önceden yükleyebilirsiniz. Bu, kullanıcı tıkladığında verinin anında görünmesini sağlar.

Sıkça Sorulan Sorular

Tanstack Query neden Redux veya Context API yerine kullanılmalı?

Redux ve Context API, istemci tarafındaki durumları yönetmek için harikadır ancak sunucu verilerini yönetmek için gereken "loading, error, caching, refetching" gibi karmaşık mantıkları manuel yazmanızı gerektirir. Tanstack Query, bu sunucu odaklı mantığı doğrudan kutudan çıktığı gibi sunar.

QueryKey neden önemlidir?

QueryKey, verinin önbellekteki adresidir. Eğer anahtarı yanlış yapılandırırsanız veya parametreleri anahtara dahil etmezseniz, uygulama yanlış verileri gösterebilir veya önbellek çakışmaları yaşanabilir.

Veri güncelliğini nasıl garanti ederim?

invalidateQueries metodunu kullanarak, bir veri değiştiğinde ilgili sorgunun tekrar tetiklenmesini sağlayabilirsiniz. Ayrıca refetchInterval kullanarak verinin periyodik olarak güncellenmesini de sağlayabilirsiniz.

Sunucu tarafında render (SSR) ile uyumlu mudur?

Evet, Tanstack Query Next.js gibi SSR destekleyen çerçevelerle tam uyumludur. Verilerin sunucuda önceden yüklenip (dehydration) istemciye aktarılmasına olanak tanır.

Hata yönetimi nasıl merkezi hale getirilir?

QueryCache veya MutationCache yapılandırmalarıyla, uygulamanızdaki tüm hataları tek bir noktadan yakalayabilir ve global hata bildirimleri (toast mesajları gibi) tetikleyebilirsiniz.

Sonuç

React projelerinde Tanstack Query ile sunucu durumu yönetimi, sadece kod kalitesini artırmakla kalmaz; aynı zamanda uygulamanızın performansını ve kullanıcı deneyimini üst seviyeye taşır. 2026 yılı standartlarında, manuel veri yönetimi yöntemlerinden kaçınarak bu kütüphanenin sunduğu deklaratif yapıyı benimsemek, sürdürülebilir ve ölçeklenebilir bir yazılım mimarisi için zorunluluktur. Bu rehberde paylaşılan adımları uygulayarak ağ isteklerinizi optimize edebilir, önbellek yönetimini profesyonel bir seviyeye taşıyabilir ve uygulamanızdaki veri senkronizasyonu sorunlarını tamamen ortadan kaldırabilirsiniz.

Tanstack Query ile Veri Yönetiminde Sık Yapılan Hatalar ve Çözümleri

React projelerinde Tanstack Query kullanımı oldukça sezgisel görünse de, geliştiricilerin sıklıkla düştüğü bazı tuzaklar uygulama performansını doğrudan etkileyebilir. Bu hataları önceden bilmek, projenizin ölçeklenebilirliğini artırır.

QueryKey Stratejisinde Hatalı Kullanım

En yaygın hata, QueryKey dizilerini statik veya tutarsız tanımlamaktır. QueryKey, kütüphanenin önbellekleme mekanizmasının kalbidir. Eğer bir parametre (örneğin userId) kullanıyorsanız, bunu mutlaka dizi içerisine dahil etmelisiniz.

• Hatalı: ['user'] (Tüm kullanıcılar için aynı önbellek kullanılır)
• Doğru: ['user', userId] (Her kullanıcı için ayrı önbellek girişi oluşturulur)

useEffect İçinde Veri Çekme Israrı

Geliştiriciler bazen alışkanlık gereği useEffect içerisinde fetch veya axios kullanarak veriyi yerel state'e (useState) aktarmaya çalışırlar. Bu, Tanstack Query'nin sağladığı otomatik önbellekleme, arka plan güncelleme ve hata yönetimi avantajlarını tamamen devre dışı bırakır. Veri çekme işlemlerini her zaman useQuery kancasına devretmelisiniz.

Sunucu Durumu Yönetimi Araç Karşılaştırması

Modern React ekosisteminde veri yönetimi için kullanılan farklı yaklaşımlar mevcuttur. Aşağıdaki tablo, Tanstack Query'nin diğer yöntemlere göre konumunu özetlemektedir.

Güvenlik: Hassas Verilerin Önbelleklenmesi

Tanstack Query, verileri istemci tarafında bellekte tutar. Bu durum, hassas verilerle çalışırken dikkatli olmanızı gerektirir. Özellikle kimlik doğrulama belirteçleri veya kişisel kullanıcı verileri söz konusu olduğunda şu güvenlik önlemlerini almalısınız:

• Önbellek Süresini Sınırlayın: staleTime ve gcTime değerlerini hassas veriler için düşük tutarak verinin bellekte kalma süresini kısaltın.
• Veri Filtreleme: API'den gelen verinin tamamını değil, sadece arayüzde ihtiyaç duyulan kısımlarını önbelleğe alın.
• Hassas Verileri Hariç Tutun: Çok kritik veriler için cacheTime: 0 ayarını kullanarak verinin önbelleğe alınmamasını sağlayabilirsiniz.

Örnek Senaryo: Dinamik Filtreleme ile Veri Çekme

Kullanıcıların arama kutusuna yazdığı değerlere göre verileri filtrelediğiniz bir senaryoyu ele alalım. Burada useQuery'nin enabled parametresi hayat kurtarıcıdır.

const { data, isLoading } = useQuery({
  queryKey: ['products', searchTerm],
  queryFn: () => fetchProducts(searchTerm),
  enabled: searchTerm.length > 2, // Sadece 2 karakterden uzunsa istek at
});

Bu yaklaşım, gereksiz API isteklerini engeller ve sunucu üzerindeki yükü azaltır. enabled parametresi, bağımlılıkların hazır olmadığı durumlarda sorguyu askıya alarak uygulamanın hata vermesini engeller.

İleri Seviye Optimizasyon: Veri Normalizasyonu ve Seçiciler (Selectors)

API'den dönen veri yapısı her zaman arayüz bileşenleriniz için uygun olmayabilir. select seçeneğini kullanarak veriyi çekildiği anda dönüştürebilirsiniz.

Profesyonel İpucu: select fonksiyonu, veri değişmediği sürece hesaplamayı yeniden yapmaz. Bu, karmaşık veri dönüşümlerinde render performansını doğrudan artırır.

Örnek kullanım:

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  select: (users) => users.filter(user => user.isActive),
});

Bu yöntem sayesinde, bileşen içerisinde sürekli filter veya map işlemi yapmaktan kurtulur, temiz ve performanslı bir kod yapısı elde edersiniz.

Büyük Ölçekli Uygulamalarda Modüler Yapı

Projeniz büyüdükçe, tüm sorguları tek bir dosya içinde tutmak yönetilemez hale gelir. Sorgularınızı "Custom Hooks" yapısında gruplandırın.

• /hooks/queries/useUser.ts: Kullanıcı ile ilgili tüm sorguları içerir.
• /hooks/mutations/useUpdateProfile.ts: Profil güncelleme işlemlerini barındırır.

Bu modüler yaklaşım, hem kodun okunabilirliğini artırır hem de bir sorgunun farklı bileşenlerde yeniden kullanılmasını (reusability) kolaylaştırır. Aynı zamanda test yazım süreçlerinde her bir hook'u izole bir şekilde test edebilirsiniz.

Hata Yönetiminde Kullanıcı Deneyimi (UX)

Sadece isError durumunu kontrol etmek yeterli değildir. Kullanıcıya hatanın nedenini açıklayan anlamlı geri bildirimler sunmalısınız. error nesnesini inceleyerek HTTP durum kodlarına göre (401 Yetkisiz, 404 Bulunamadı, 500 Sunucu Hatası) özelleştirilmiş hata mesajları gösterebilirsiniz.

Ayrıca, retry özelliğini kullanarak ağ kaynaklı geçici hatalarda otomatik yeniden deneme mekanizmasını yapılandırabilirsiniz. Örneğin, 3 kez deneme yapıp ardından kullanıcıya manuel bir "Yeniden Dene" butonu sunmak, modern web uygulamalarının standart bir gerekliliğidir.

Sunucu Durumu Yönetimi Araç Karşılaştırması

React ekosisteminde veri yönetimi için kullanılan araçlar farklı ihtiyaçlara hitap eder. TanStack Query, özellikle sunucu tarafındaki verilerin senkronizasyonu için optimize edilmiştir. Aşağıdaki tablo, yaygın kullanılan yöntemlerin temel farklarını ortaya koymaktadır.

Güvenlik: Hassas Verilerin Önbelleklenmesi

TanStack Query, varsayılan olarak verileri bellekte (in-memory) tutar. Bu durum, özellikle hassas kişisel veriler (PII - Personally Identifiable Information) ile çalışırken güvenlik riskleri oluşturabilir. Güvenliği sağlamak için şu stratejileri uygulayın:

• Hassas Verileri Filtreleyin: Sadece UI için gerekli olan alanları API yanıtından ayıklayarak (select fonksiyonu ile) önbelleğe alın.
• CacheTime (gcTime) Ayarı: Hassas verilerin bellekte kalma süresini gcTime: 0 yaparak, bileşen unmount olduğunda verinin bellekten temizlenmesini sağlayın.
• Persistent Storage: Eğer persistQueryClient kullanıyorsanız, yerel depolama (localStorage/IndexedDB) alanına yazılan verileri mutlaka şifreleyin veya hassas verileri bu depolama mekanizmalarından hariç tutun.

Örnek Senaryo: Dinamik Filtreleme ile Veri Çekme

Dinamik filtreleme, kullanıcı arayüzünde seçilen kriterlere göre API isteğinin güncellenmesini gerektirir. TanStack Query'de bu işlem, queryKey dizisinin bir parçası olarak değişkenleri kullanmakla çok basittir.

// Örnek: Kategoriye göre ürün getirme
const { data, isLoading } = useQuery({
  queryKey: ['products', category, sortBy],
  queryFn: () => fetchProducts(category, sortBy),
  enabled: !!category // Kategori seçilmeden istek atma
});

Burada category veya sortBy değiştiği anda, TanStack Query otomatik olarak yeni bir istek başlatır ve eski veriyi arka planda günceller. Bu, useEffect ile manuel yönetime göre çok daha kararlı ve hatasız bir yöntemdir.

İleri Seviye Optimizasyon: Veri Normalizasyonu ve Seçiciler (Selectors)

Büyük veri setleri ile çalışırken, bileşenlerinizin sadece ihtiyaç duydukları veriyi alması performans için kritiktir. select opsiyonunu kullanarak veriyi çekildiği anda dönüştürebilirsiniz.

Neden Seçiciler Kullanılmalı?

• Gereksiz Render'ları Önleme: Sadece seçilen veri parçası değiştiğinde bileşen yeniden render edilir.
• Veri Formatını Düzenleme: API'den gelen karmaşık veri yapısını, UI bileşeninin kolayca tüketebileceği bir formata dönüştürür.

İpucu: Eğer karmaşık bir veri dönüşümü yapıyorsanız, useMemo ile seçici fonksiyonunuzu sarmalayarak hesaplama maliyetini düşürebilirsiniz.

TanStack Query ile Veri Yönetiminde Sık Yapılan Hatalar ve Çözümleri

1. QueryKey Stratejisinde Hatalı Kullanım

En sık yapılan hata, queryKey değerlerini statik tutmaktır. Örneğin, kullanıcı ID'sine göre veri çekerken ['user'] anahtarını kullanmak, farklı kullanıcılar arasında veri çakışmasına neden olur. Bunun yerine ['user', userId] yapısını kullanmalısınız.

2. useEffect İçinde Veri Çekme Israrı

Geliştiriciler genellikle useEffect içinde useState kullanarak veri yönetmeye çalışırlar. Bu yaklaşım; yüklenme durumu, hata yönetimi ve önbellekleme gibi süreçleri manuel yönetmenizi gerektirir. TanStack Query, bu süreçlerin tamamını tek bir hook ile çözerek kodunuzu %70 oranında azaltır.

3. Yanlış StaleTime Stratejisi

Her verinin staleTime: Infinity olması gerekmez. Sık değişen verilerde (örneğin borsa verileri) staleTime değerini düşük tutmalı, nadir değişen verilerde (örneğin kullanıcı profil bilgileri) ise yüksek tutarak API yükünü azaltmalısınız.

Büyük Ölçekli Uygulamalarda Modüler Yapı

Projeniz büyüdükçe, tüm sorguları tek bir dosya içinde tutmak yönetilemez hale gelir. Sorgularınızı "Custom Hooks" yapısında gruplandırın.

• /hooks/queries/useUser.ts: Kullanıcı ile ilgili tüm sorguları içerir.
• /hooks/mutations/useUpdateProfile.ts: Profil güncelleme işlemlerini barındırır.

Bu modüler yaklaşım, hem kodun okunabilirliğini artırır hem de bir sorgunun farklı bileşenlerde yeniden kullanılmasını (reusability) kolaylaştırır. Aynı zamanda test yazım süreçlerinde her bir hook'u izole bir şekilde test edebilirsiniz.

Hata Yönetiminde Kullanıcı Deneyimi (UX)

Sadece isError durumunu kontrol etmek yeterli değildir. Kullanıcıya hatanın nedenini açıklayan anlamlı geri bildirimler sunmalısınız. error nesnesini inceleyerek HTTP durum kodlarına göre (401 Yetkisiz, 404 Bulunamadı, 500 Sunucu Hatası) özelleştirilmiş hata mesajları gösterebilirsiniz.

Ayrıca, retry özelliğini kullanarak ağ kaynaklı geçici hatalarda otomatik yeniden deneme mekanizmasını yapılandırabilirsiniz. Örneğin, 3 kez deneme yapıp ardından kullanıcıya manuel bir "Yeniden Dene" butonu sunmak, modern web uygulamalarının standart bir gerekliliğidir.

Profesyonel İpuçları: Performans İçin Ekstra Stratejiler

Uygulamanızın hızını artırmak için sadece veri çekmek yetmez, bu verinin nasıl sunulduğu da önemlidir:

1. DevTools Kullanımı: TanStack Query DevTools, önbellekteki verileri anlık görmenizi ve sorgu durumlarını izlemenizi sağlar. Geliştirme aşamasında mutlaka aktif edin.
2. PlaceholderData: Bir sonraki sayfa yüklenirken, kullanıcının boş ekran görmemesi için mevcut veriyi veya bir "placeholder" verisini göstererek UX'i iyileştirin.
3. Geri Plan Yenileme (Background Refetching): refetchOnWindowFocus özelliğini dikkatli yapılandırın. Eğer uygulamanız çok sık sekme değiştirilen bir yapıdaysa, bu özelliği kapatmak sunucu yükünü ciddi oranda düşürür.

Bu yapılandırmalar, uygulamanızın sadece çalışmasını değil, aynı zamanda ölçeklenebilir ve sürdürülebilir olmasını sağlar. Karmaşık durum yönetimi süreçlerini standartlaştırarak, ekibinizle birlikte daha temiz bir kod tabanı oluşturabilirsiniz.

Sunucu Durumu Yönetimi: Araç Karşılaştırmalı Analiz Tablosu

Modern React ekosisteminde veri yönetimi için birçok farklı yaklaşım bulunmaktadır. TanStack Query'nin diğer yöntemlere göre nerede konumlandığını anlamak için aşağıdaki karşılaştırma tablosunu inceleyebilirsiniz.

Güvenlik: Hassas Verilerin Önbelleklenmesi ve Yönetimi

TanStack Query, verileri önbellekte tutarken geliştiriciye büyük kolaylık sağlar ancak hassas verilerle çalışırken güvenlik protokollerine dikkat edilmelidir. Özellikle kullanıcı profili, finansal veriler veya kişisel sağlık bilgileri gibi verilerde şu stratejiler uygulanmalıdır:

• Önbellek Sürelerini Kısıtlayın: Hassas veriler için staleTime değerini çok düşük tutarak verinin bellekte uzun süre kalmasını engelleyin.
• Hassas Verileri LocalStorage'a Aktarmayın: TanStack Query'nin persistQueryClient eklentisini kullanırken, önbelleğin diske yazılacağı alanın güvenli olduğundan emin olun. Hassas verileri içeren sorguları bu yapılandırmanın dışında tutun.
• Query Key İzolasyonu: Kullanıcı bazlı verileri sorgularken, queryKey içerisinde mutlaka kullanıcıya özel benzersiz kimlikler (User ID gibi) kullanın. Böylece bir kullanıcının verisinin başka bir kullanıcıya sızma riskini minimize edersiniz.

Örnek Senaryo: Dinamik Filtreleme ile Veri Çekme

Dinamik filtreleme, kullanıcı etkileşimine göre sunucuya farklı parametrelerin gönderilmesini gerektirir. TanStack Query bu süreci oldukça basitleştirir.

  // Örnek: Filtreleme parametrelerini QueryKey'e dahil etme
  const { data } = useQuery({
    queryKey: ['products', { category, sort, page }],
    queryFn: () => fetchProducts({ category, sort, page }),
  });

Burada dikkat edilmesi gereken en önemli nokta, queryKey dizisinin bir bağımlılık listesi gibi çalışmasıdır. Parametrelerden herhangi biri değiştiğinde, TanStack Query otomatik olarak yeni bir sorgu başlatır ve eski veriyi önbellekten getirir veya sunucuya yeni istek atar.

Veri Normalizasyonu ve Seçiciler (Selectors) ile Performans

Gelen API yanıtları her zaman uygulama arayüzü için en uygun formatta olmayabilir. select seçeneğini kullanarak veriyi çekildiği anda dönüştürebilirsiniz.

  const { data } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
    select: (users) => users.filter(user => user.isActive),
  });

Bu yöntem, sadece filtrelenmiş veride değişiklik olduğunda bileşenlerin yeniden render edilmesini sağlar. Gereksiz render işlemlerini engellemek için bu seçicileri useCallback ile sarmalamak, büyük ölçekli projelerde performans artışı sağlar.

Büyük Ölçekli Uygulamalarda Modüler Yapı

Proje büyüdükçe, tüm sorguları tek bir dosya içinde tutmak yönetilemez hale gelir. Profesyonel bir yaklaşım için sorguları "Custom Hook" yapısına taşıyın.

1. Sorgu Katmanı: Tüm useQuery ve useMutation çağrılarını hooks/queries/ dizini altında toplayın.
2. API Katmanı: Axios veya Fetch isteklerini services/api.js gibi ayrı bir dosyada tanımlayın.
3. Tip Güvenliği: TypeScript kullanıyorsanız, API yanıtları için arayüzleri (interfaces) tanımlayarak hata payını sıfıra indirin.

Hata Yönetiminde Kullanıcı Deneyimi (UX)

Hata yönetimi sadece isError durumunu kontrol etmek değildir. Kullanıcıya hatanın nedenini ve nasıl çözebileceğini bildiren bir yapı kurmalısınız.

Pro İpucu: Global hata yönetimi için QueryCache üzerinde onError callback'ini kullanın. Bu sayede tüm uygulamadaki 401 (Yetkisiz) hatalarını tek bir merkezden yöneterek kullanıcıyı giriş sayfasına yönlendirebilirsiniz.

Kullanıcı deneyimini iyileştirmek için errorBoundary bileşenleri ile TanStack Query'yi entegre edin. Böylece veri çekme hatası oluştuğunda tüm uygulamanın çökmesini engelleyebilir ve kullanıcıya "Yeniden Dene" seçeneği sunan şık bir hata ekranı gösterebilirsiniz.

TanStack Query ile Veri Yönetiminde Sık Yapılan Hatalar

1. QueryKey Stratejisinde Hatalı Kullanım

Sorgu anahtarlarını statik tanımlamak, uygulamanın farklı bölümlerinde aynı verinin çekilmesine ancak güncellenmemesine neden olur. queryKey her zaman sorguyu tanımlayan tüm değişkenleri içermelidir.

2. useEffect İçinde Veri Çekme Israrı

Geleneksel useEffect ile veri çekmek, önbellekleme, yüklenme durumu ve hata yönetimi gibi karmaşık süreçleri manuel yönetmenize neden olur. Bu durum, "race condition" denilen yarış koşullarına ve bellek sızıntılarına yol açabilir. TanStack Query bu süreci tamamen otomatikleştirir.

3. Yanlış StaleTime Stratejisi

Her sorgu için varsayılan staleTime: 0 değerini kullanmak, her sekme geçişinde gereksiz sunucu istekleri oluşmasına neden olur. Değişmeyen veya nadir değişen veriler için staleTime süresini artırarak sunucu üzerindeki yükü ciddi oranda azaltabilirsiniz.

Profesyonel İpuçları: Performans İçin Ekstra Stratejiler

Uygulamanızın hızını artırmak için sadece veri çekmek yetmez, bu verinin nasıl sunulduğu da önemlidir:

• DevTools Kullanımı: TanStack Query DevTools, önbellekteki verileri anlık görmenizi ve sorgu durumlarını izlemenizi sağlar. Geliştirme aşamasında mutlaka aktif edin.
• PlaceholderData: Bir sonraki sayfa yüklenirken, kullanıcının boş ekran görmemesi için mevcut veriyi veya bir "placeholder" verisini göstererek UX'i iyileştirin.
• Geri Plan Yenileme (Background Refetching): refetchOnWindowFocus özelliğini dikkatli yapılandırın. Eğer uygulamanız çok sık sekme değiştirilen bir yapıdaysa, bu özelliği kapatmak sunucu yükünü ciddi oranda düşürür.

Bu yapılandırmalar, uygulamanızın sadece çalışmasını değil, aynı zamanda ölçeklenebilir ve sürdürülebilir olmasını sağlar. Karmaşık durum yönetimi süreçlerini standartlaştırarak, ekibinizle birlikte daha temiz bir kod tabanı oluşturabilirsiniz.