A page can load quickly and still feel unstable.

That usually happens when the initial render strategy is fine, but client-side data updates are handled poorly.

In this article, we’ll compare two common approaches:

A basic useEffect fetch
A production-ready pattern using TanStack Query

Both fetch the same API under the same network conditions.

One flickers.

The other stays smooth.

The Experiment

I built a small Next.js Rendering Lab to visualize:

SSR
CSR
SSG
ISR
Hydration
Cached background refetching
UI flicker caused by naive fetching

Both components:

call the same endpoint
refetch every few seconds
run under throttled network conditions
display live telemetry

Naive `useEffect` Fetching

A common pattern looks like this:

useEffect(() => {
  setLoading(true);

  fetch("/api/data")
    .then((res) => res.json())
    .then((data) => {
      setData(data);
      setLoading(false);
    });
}, []);

Enter fullscreen mode Exit fullscreen mode

This works, but on every refetch:

loading state resets
content disappears
layout shifts
charts blink

The data may arrive quickly, but the interface feels unstable.

TanStack Query

TanStack Query handles updates differently.

It:

keeps previous data visible
fetches in the background
updates only changed values
avoids unnecessary loading states

The result is a much smoother experience.

Users continue seeing the existing UI while fresh data is being fetched.

Rendering Strategy vs Data Strategy

These are two separate concerns.

Rendering Strategy

Determines how the page initially loads.

Data Strategy

Determines how the UI behaves after hydration.

useEffect
TanStack Query
SWR
caching
background refetching

A page can be server-rendered and still flicker if data updates are handled poorly.

Why This Matters

This becomes obvious in:

dashboards
analytics tools
admin panels
live metrics
stock tickers
collaborative applications

Users may not understand hydration or caching, but they notice:

flicker
disappearing content
layout shifts
unstable interfaces

Good frontend UX is often about preserving visual stability.

Try the Rendering Lab

Live Demo:
Next.js Rendering Lab

Source Code:
GitHub Repository

Watch the YouTube Short

I also recorded a short visual comparison showing both patterns side by side under Slow 4G throttling.

Final Thoughts

The biggest lesson from this experiment:

Performance is not only about speed. It is also about stability.

Two apps can fetch data at almost the same speed but feel completely different depending on how updates are handled.

TanStack Query does not make your API faster.

It makes your UI behave better.

And users notice that immediately.