React 19 Features — Complete Guide

React 19 Features — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of React.js Tutorial on Toolliyo Academy.

8 min read Updated 7/8/2026

On this page

React.js Tutorial · Lesson 49 of 100

Query Caching

Beginner ✓ → Intermediate ✓ → Advanced → Professional

Advanced · 3 — Production skills · ~18 min read · Module 5: API & State Management

Introduction

This is advanced material: Query Caching. It is what teams use on live products. Read the example carefully and try changing one line at a time to see what happens. Query caching stores API results in memory by queryKey. TanStack Query returns cached data instantly and refetches when data goes stale. Without cache, every navigation refetches the same user profile or product list — slow and wasteful.

State mistakes cause the most React bugs for beginners. Keep server data and UI state separate — this lesson shows how teams do that.

When will you use this?

Use these patterns when data is shared across pages or comes from a server.

Shopping carts, user sessions, and API data need clear state patterns.
Teams pick Context, Zustand, or Redux based on app size — you will see all three in jobs.

Real-world: profile not refetched every tab click

Zoho user profile cached 5 minutes — switching Settings tabs does not hammer /api/me on each navigation.

Production-style code

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,
      gcTime: 30 * 60 * 1000
    }
  }
});

function useProfile() {
  return useQuery({
    queryKey: ['profile'],
    queryFn: () => api.get('/me').then(r => r.data)
  });
}

What happens in production: Lower API cost and snappier navigation — configure staleTime per data type (profile vs live stock ticker).

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
  staleTime: 5 * 60 * 1000,  // fresh for 5 minutes
  gcTime: 30 * 60 * 1000     // keep in cache 30 min
});

Line-by-line walkthrough

Code	What it means
`useQuery({`	TanStack Query hook — loads or updates server data with caching built in.
`queryKey: ['user', userId],`	Part of the Query Caching example — read it together with the lines before and after.
`queryFn: () => fetchUser(userId),`	Defines a function — often a component or event handler.
`staleTime: 5 * 60 * 1000, // fresh for 5 minutes`	Part of the Query Caching example — read it together with the lines before and after.
`gcTime: 30 * 60 * 1000 // keep in cache 30 min`	Part of the Query Caching example — read it together with the lines before and after.
`});`	Closes a block started by { or ( above.

How it works (big picture)

staleTime: how long data is considered fresh (no refetch).
gcTime: how long unused cache stays in memory.

Do this on your computer

Use consistent queryKeys across components.
Tune staleTime for data that changes rarely.
Call invalidateQueries after mutations.
Read the real-world section and name which part of the app uses this topic.
Run the example locally and confirm the same behavior in the browser.
Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

Change text or labels in the example and save — watch the browser update.
Break the code on purpose (remove a bracket), read the error message, then fix it.
Open React DevTools (browser extension) while running Query Caching and inspect component props/state.

Remember

queryKey = cache identity. staleTime reduces unnecessary requests. invalidateQueries after updates.

Common questions

Where is cache stored?

In memory by default; plugins exist for persistence.

How long should I spend on Query Caching?

Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new hook or routing topic; setup lessons may take one afternoon.

What if I get stuck on Query Caching?

Re-read the line-by-line walkthrough, check the browser console for red errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.

Where is Query Caching used in real jobs?

See the real-world section above — the same pattern appears in LMS, banking, e-commerce, and SaaS products. Interviewers ask you to explain it using one concrete example from your project or this lesson.

Questions on this lesson 0

No questions yet — be the first to ask!