Why Your Nextjs UI Flickers: TanStack Query vs useEffect

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);
    });
}, []);

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.

• SSR
• SSG
• ISR
• CSR

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.