In React applications, which would be considered server state?

User profiles from an API are server state because they live remotely and can change. UI toggles like dropdown or focus are client state.

Why is caching necessary for server state in React applications?

Caching reduces network requests, decreases latency, and improves UX by storing frequently accessed data locally. Without it, every operation triggers a network round-trip.

What is the primary challenge with managing server state compared to client state?

Server state can be modified by other clients or background processes, making it unpredictable. You must handle synchronization, staleness, and invalidation.

What does the staleTime property control in React Query?

staleTime (in milliseconds) defines the fresh window. Once exceeded, data is marked stale and background revalidation occurs on next use.

What is the difference between staleTime and gcTime (cacheTime)?

staleTime marks data stale and triggers revalidation. gcTime determines how long unused data persists in memory before garbage collection.

By default, what is the staleTime value in React Query?

Default staleTime is 0, meaning data is immediately considered stale. This ensures background revalidation happens frequently to keep data fresh.

What happens when refetchOnWindowFocus is true and user returns to the browser tab?

refetchOnWindowFocus (default true) triggers automatic refetch of stale queries when user returns, ensuring fresh data on tab focus.

Why is stale-while-revalidate better than showing a loading spinner for every request?

SWR provides immediate visual feedback with cached data, then updates seamlessly. Users see content instantly rather than waiting for spinners.

In SWR, when does a background revalidation NOT occur?

Background revalidation only happens when data is stale (outside staleTime). Fresh data doesn't trigger revalidation until staleTime expires.

What is the primary advantage of cursor-based pagination over offset-based?

Cursor-based pagination points to a specific item, so data changes don't cause duplicate or skipped items. Offset-based pagination fails when rows are inserted/deleted.

What does the getNextPageParam function return in useInfiniteQuery?

getNextPageParam extracts the cursor from the current page response and returns it for pageParam in the next fetch call.

In useInfiniteQuery, what does it mean if nextCursor is null?

nextCursor: null signals there are no more pages. This allows components to stop rendering 'Load More' buttons.

How does useInfiniteQuery store multiple pages of data?

useInfiniteQuery stores data as { pages: [page1, page2, page3, ...], pageParams: [...] }, allowing access to all previously fetched pages.

What is the pageParam in useInfiniteQuery's queryFn?

pageParam contains the cursor returned by getNextPageParam. For first page it defaults to the initialPageParam value.

Which hook method in useInfiniteQuery triggers loading the next page?

fetchNextPage() is the method returned by useInfiniteQuery to load the next batch of data using the nextCursor.

How would you integrate useInfiniteQuery with IntersectionObserver for automatic loading?

IntersectionObserver monitors a sentinel element at the end of list. When visible, it triggers fetchNextPage() for seamless infinite scroll.

What is an optimistic mutation?

Optimistic mutations update the UI instantly, assume success, then rollback if the server returns an error. This creates snappier user experience.

In the onMutate callback, why should you cancel ongoing refetches?

Canceling refetches prevents stale data from overwriting the optimistic update you just applied to the cache.

What context object should onMutate return for use in onError?

onMutate should return context (e.g., { previousPosts }) that onError receives as the third parameter to rollback changes.

Which callback should trigger query invalidation after successful mutation?

onSettled fires after both success and error, making it ideal for invalidation logic that should run regardless of mutation outcome.

If a mutation fails, what happens to the optimistically updated UI?

onError callback restores previous cache state using the context object from onMutate, reverting the optimistic update.

What queryClient method updates cache data in onMutate?

setQueryData updates cache synchronously without triggering a fetch, allowing optimistic updates before server response.

How do you access the queryClient instance in a component to perform optimistic updates?

useQueryClient() hook returns the queryClient instance configured in QueryClientProvider, enabling cache manipulation.

What does invalidateQueries with queryKey: ['posts'] do?

Exact key matching invalidates only that specific query, marking it stale and queuing a refetch.

When should you use prefix-based invalidation instead of exact key matching?

Prefix invalidation invalidates all queries starting with that prefix, useful for bulk updates when multiple related queries need refreshing.

How do you invalidate ALL queries in React Query?

Calling invalidateQueries() without parameters invalidates all cached queries, triggering a complete refetch across the app.

What is a query key hierarchy?

Query key hierarchy like ['posts', '1', 'comments'] allows invalidating ['posts'] to affect all child keys while maintaining granular control.

After a CREATE mutation, which query should typically be invalidated?

Creating an item changes the list, so invalidate the list query (e.g., ['posts']) to refetch and include the new item.

What happens if you invalidate a query that is not currently in the cache?

Invalidating a query that's not cached is harmless. If that query is later used, it will fetch fresh data.

How do you invalidate only a specific item's detail query after updating it?

Invalidating ['posts', itemId] targets the specific item's query without invalidating other posts, reducing unnecessary refetches.

In a news feed system with React Query, what staleTime value is appropriate?

News feeds benefit from 30-second freshness window: enough to avoid excessive refetches but short enough to catch new posts quickly.

How would you detect when user scrolled to bottom in infinite scroll to fetch next page?

IntersectionObserver efficiently detects when sentinel reaches viewport, triggering fetchNextPage() without constant scroll event listeners.

For a photo grid with lazy-loaded images, which React Query configuration is most appropriate?

Photo metadata changes slowly; high staleTime reduces unnecessary image metadata refetches. Images are immutable once uploaded.

In a news feed, what should happen when user likes a post optimistically?

Optimistic update increments like count and sets likedByMe: true immediately. onError decrements and reverts on failure.

How would invalidation work after creating a new post in a feed application?

After POST /posts, invalidate the feed query to refetch. Option C skips invalidation but wastes server freshness benefits.

Server State with React Query — System Design Concept

Q: Which characteristic differentiates server state from client state?

Server state is owned by the remote server and can be modified by other users, making it stale. Client state like modal status is purely local and never becomes stale.

🍪 TechCookies

Free

📚Server State with React QueryFree

7 sections

~29 min total

36 quick quizzes

3 SD challenges linked

0 of 7 done·~30 min left

Concepts›Server State with React Query›What Is Server State?

0 / 7

7 sections~29 min

What Is Server State?

Server state lives remotely, becomes stale, and requires fetching and caching differently than client state

ReadQuiz

~5 min

⋯

Stale-While-Revalidate Caching Strategy

Serve cached data immediately while fetching fresh data in background, then update UI when available

ReadQuizCode

~5 min

⋯

Cursor-Based Infinite Scroll with useInfiniteQuery

Load paginated data progressively using cursors to track position, avoiding offset-based pagination pitfalls

ReadQuizCode

~5 min

⋯

Optimistic Mutations and Rollback

Update UI immediately on mutation, then rollback if server fails, creating instant perceived responsiveness

ReadQuizCode

~5 min

⋯

Query Invalidation Patterns

Invalidate stale cache after mutations using exact, prefix, or wildcard patterns to trigger refetches

ReadQuizCode

~5 min

⋯

Relevant System Design Questions

Apply React Query patterns to real-world scenarios like news feeds and photo grids with infinite scroll

ReadQuizCode

~5 min

⋯

Practice test

36 questions

~12 min

Section 1 of 7ReadQuick quiz

What Is Server State?

Server state lives remotely, becomes stale, and requires fetching and caching differently than client state

~5 min read

3 quick quizzes

Before diving into React Query specifics, it helps to understand what makes server state different from regular React state.

Feature	Client State	Server State
Where it lives	Browser memory	Remote database/API
Who owns it	Your app	The server
Can go stale?	No	Yes
Needs fetching?	No	Yes
Example	Modal open/close	User profile, posts list

Server state is asynchronous, can become stale at any time (someone else might update the data), and needs to be cached to avoid unnecessary network requests.

☑ Quick check 1/3

Which characteristic differentiates server state from client state?

AServer state can become stale because others may modify it on the server

BServer state is stored only in browser localStorage

CServer state never requires network requests

DServer state is always consistent across all clients

Answer the quiz to continue

Notes

🔍

Loading…