React Query Stale Data: Kenapa Tampil Data Lama & Cara Fixnya [2026]

Problem: Stale Data di React Query

Gue kasih contoh nih: lo lagi bikin aplikasi React yang fetch dan tampilin list item pake React Query. Pas testing, lo nemu masalah yang bikin kesel. Waktu pertama kali render halaman, datanya outdated atau ga bener. Tapi anehnya, kalo lo pindah halaman terus balik lagi, datanya malah fresh dan bener. Kok bisa gitu?

Masalah ini emang suka bikin bingung dan bikin user experience jadi jelek. Ini sering terjadi gara-gara cara React Query handle cached data dan query keys. Yuk kita bahas kenapa bisa begini dan gimana cara ngatasinnya step by step.

Kenapa Sih Ini Bisa Terjadi?

React Query tuh library yang keren banget buat manage server state di React. Defaultnya, dia nyimpen hasil query di cache dan pake data yang di-cache sampe ada data baru. Meskipun ini bikin performance lebih bagus, kadang malah bikin data jadi stale atau outdated kalo:

• Query key-nya ga unique atau ga deterministic
• Setting staleTime atau cacheTime nya kurang tepat
• Placeholder data dipake ga sesuai
• Query-nya ga refetch pas component mount

Sebenernya behavior ini emang didesain buat optimasi data fetching, tapi perlu di-set dengan bener biar data yang ditampilin selalu fresh.

Baca Juga: Text Editor React Terbaik: Perbandingan CKEditor vs TinyMCE vs Jodit

Panduan Step-by-Step Buat Atasi Stale Data

Nih gue kasih tau caranya:

1. Pake Query Key yang Unique dan Deterministic

React Query pake query key buat cache dan identifikasi data. Kalo query key-nya ga unique atau ga include semua dependencies, React Query bisa aja return cached data yang salah. Nih contoh cara bikin query key yang bener:

const { data, isLoading } = useQuery(["dataList", userId, page, pageSize], fetchData);

2. Set staleTime yang Tepat

Setting staleTime nentuin berapa lama data dianggep fresh. Kalo valuenya kekecilan, React Query bakal kebanyakan refetch. Sebaliknya, kalo kegedean, lo bakal liat stale data lebih lama.

Contohnya, buat bikin data fresh selama 5 menit:

const { data, isLoading } = useQuery(["dataList", userId, page, pageSize], fetchData, {
    staleTime: 1000 * 60 * 5, // Data is fresh for 5 minutes
});

3. Hindari Placeholder Data Kalo Ga Perlu

placeholderData itu buat nyediain data sementara sampe query-nya selesai. Tapi dia ga ngisi cache, jadi langsung diganti pas fetch selesai. Kalo lo pengen ngisi cache, mending pake initialData aja:

const { data, isLoading } = useQuery(["dataList", userId, page, pageSize], fetchData, {
    initialData: {
        currentPage: 0,
        totalItems: 0,
        data: [],
        message: "",
        totalPages: 0,
    },
    staleTime: 1000 * 60 * 5,
});

4. Enable Refetch on Mount atau Window Focus

Kadang lo perlu data fresh tiap kali component mount. Lo bisa set ini pake refetchOnMount atau refetchOnWindowFocus:

const { data, isLoading } = useQuery(["dataList", userId, page, pageSize], fetchData, {
    refetchOnMount: "always",
    refetchOnWindowFocus: true,
});

5. Manual Invalidate Query

Kalo lo pengen pastiin stale data ga pernah ditampilin, lo bisa manual invalidate query pake useQueryClient:

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

const queryClient = useQueryClient();

useEffect(() => {
    queryClient.invalidateQueries(["dataList", userId, page, pageSize]);
}, [userId, page, pageSize]);

6. Debug Pake React Query Devtools

Buat nemuin masalah di query configuration lo, pake React Query Devtools. Dia bisa nunjukin insight tentang query lo, termasuk keys, cache state, dan status fetching.

Baca Juga: Zustand: Lightweight State Management for Modern React Apps

Pertanyaan yang Sering Ditanyakan (FAQ)

Kenapa React Query menampilkan data lama di render pertama? Ini biasanya terjadi karena React Query langsung menyajikan cached data sambil fetch data baru di background. Di render pertama, jika ada cached data dari kunjungan sebelumnya, React Query menampilkannya langsung (meski sudah outdated) lalu menggantinya setelah refetch selesai. Set staleTime: 0 agar cached data selalu dianggap stale dan trigger background refetch segera.

Apa perbedaan staleTime dan cacheTime di React Query? staleTime mengontrol berapa lama data dianggap “segar” — query tidak akan refetch selama window ini. cacheTime (diganti nama jadi gcTime di TanStack Query v5) mengontrol berapa lama cached data yang tidak dipakai tetap di memori sebelum dihapus. Kesalahan umum adalah menetapkan staleTime tinggi dengan harapan data tetap segar, padahal justru sebaliknya: ini mencegah React Query melakukan refetch.

Kenapa navigasi pergi-balik bisa memperbaiki masalah stale data? Saat navigasi pergi, komponen unmount dan query cache dibersihkan (tergantung cacheTime). Saat kembali, query baru di-trigger. Jika data terlihat benar setelah navigasi tapi tidak saat pertama load, masalahnya hampir selalu query key yang tidak unik atau tidak dinamis sehingga tidak invalidate dengan benar saat dependensinya berubah.

Apakah masalah stale data ini juga terjadi di TanStack Query v5? Ya. Konsep yang sama berlaku di TanStack Query v5, meski beberapa opsi berganti nama: cacheTime jadi gcTime, dan callback onSuccess/onError dipindahkan dari useQuery. Strategi fix yang dijelaskan di artikel ini kompatibel dengan v4 dan v5.

Bagaimana cara memaksa React Query selalu fetch data terbaru? Set staleTime: 0 dan refetchOnMount: 'always' di opsi query lo. Ini memastikan React Query selalu fetch data baru saat komponen mount, meski ada cached data yang tersedia. Untuk data real-time, tambahkan juga refetchInterval untuk polling berkala.

Kesimpulan

React Query punya mekanisme caching dan fetching yang powerful banget, tapi perlu di-handle dengan hati-hati biar ga ada masalah stale data. Dengan ngikutin best practice yang udah gue jelasin—query key yang unique, staleTime yang tepat, pemakaian placeholderData yang bener, dan manual invalidation—lo bisa mastiin aplikasi lo nampilin data yang fresh dan akurat.

Yuk mulai terapin teknik-teknik ini buat optimasi setup React Query lo dan kasih user experience yang mantep!