ReactJS Interview Prep - State Management (Part 3)

Question 1

What is the fundamental difference between 'Client State' and 'Server State'?

Accepted Answer

Correct Answer

Answer

Client state is strings; server state is JSON.

Answer

Client state (UI toggles, form inputs) is owned by the browser and is temporary. Server state (user profiles, product lists) is owned by the database, shared among multiple users, and can become stale/out-of-date in the browser.

Answer

Client state uses Redux; server state uses Context.

Answer

There is no difference.

Question 2

Why is putting 'Server State' into Redux or Zustand considered an anti-pattern in modern React?

Accepted Answer

Correct Answer

Answer

Because Redux cannot store JSON arrays.

Answer

Because you end up writing massive amounts of boilerplate to handle caching, deduplication, background refetching, and stale-time logic, which Redux does not do out of the box.

Answer

Because Redux restricts network requests.

Answer

Because it violates the Rules of Hooks.

Question 3

What is React Query (TanStack Query)?

Accepted Answer

Correct Answer

Answer

A GraphQL client.

Answer

A powerful asynchronous state management library for React that handles fetching, caching, synchronizing, and updating server state out-of-the-box.

Answer

A replacement for the native `fetch` API.

Answer

A SQL database for the browser.

Question 4

What does the `useQuery` hook return?

Accepted Answer

Correct Answer

Answer

Just the data array.

Answer

An object containing the `data`, status flags like `isLoading`, `isError`, `isFetching`, and utilities like `refetch`.

Answer

A Redux dispatch function.

Answer

A Promise.

Question 5

In React Query, what is a `queryKey`?

Accepted Answer

Correct Answer

Answer

An API authentication token.

Answer

An array (e.g., `['todos', userId]`) used to uniquely identify and cache the query. If the key changes, React Query automatically triggers a new fetch.

Answer

A React `key` prop for mapping lists.

Answer

A primary key in a SQL database.

Question 6

What does the `staleTime` configuration do in React Query?

Accepted Answer

Correct Answer

Answer

It sets a timeout for the API request.

Answer

It defines how long the fetched data is considered 'fresh'. If data is fresh, React Query will pull it from the cache instantly and WILL NOT background refetch it. (Defaults to 0).

Answer

It deletes the data from the cache.

Answer

It dictates how long a component can live in the DOM.

Question 7

What does the `gcTime` (formerly `cacheTime`) configuration do in React Query?

Accepted Answer

Correct Answer

Answer

It speeds up the Javascript Garbage Collector.

Answer

It dictates how long inactive data (data not currently being displayed by any mounted component) remains in memory before being completely garbage collected and deleted.

Answer

It sets the time to live for cookies.

Answer

It forces a cache refresh.

Question 8

How does React Query handle multiple components requesting the exact same `queryKey` at the exact same time?

Accepted Answer

Correct Answer

Answer

It sends multiple network requests.

Answer

It deduplicates the requests. It sends exactly ONE network request, and when it resolves, it distributes the data to all components listening to that key.

Answer

It throws a race-condition error.

Answer

It queues them sequentially.

Question 9

What is `useMutation` used for in React Query?

Accepted Answer

Correct Answer

Answer

To modify the React DOM structure.

Answer

To perform Create/Update/Delete (POST/PUT/DELETE) operations that modify data on the server, rather than just fetching data.

Answer

To mutate local component state.

Answer

To mutate Redux reducers.

Question 10

After a successful `useMutation` (e.g., adding a new Todo), how do you tell React Query to update the screen?

Accepted Answer

Correct Answer

Answer

Call `window.location.reload()`.

Answer

Use `queryClient.invalidateQueries({ queryKey: ['todos'] })`. This marks the old 'todos' cache as stale and automatically triggers a background refetch, updating the UI.

Answer

Mutate the `useQuery` data array directly.

Answer

Send a WebSocket message.

Question 11

What is 'Optimistic Updating' in the context of mutations?

Accepted Answer

Correct Answer

Answer

Hoping the server doesn't crash.

Answer

Updating the local UI state immediately before the network request finishes to make the app feel blazingly fast. If the request eventually fails, you roll back the UI to its previous state.

Answer

Only updating the UI if the user has a fast connection.

Answer

Writing positive console logs.

Question 12

What is SWR?

Accepted Answer

Correct Answer

Answer

Server-Worker-React.

Answer

A data fetching library by Vercel (Stale-While-Revalidate). It is very similar to React Query, offering caching, revalidation, and deduplication with a slightly smaller API footprint.

Answer

State With Redux.

Answer

A CSS framework.

Question 13

What does the HTTP caching concept 'Stale-While-Revalidate' actually mean?

Accepted Answer

Correct Answer

Answer

It means data is never cached.

Answer

It means returning the cached (stale) data instantly so the UI feels fast, while simultaneously sending a background request to fetch (revalidate) the fresh data and update the screen when it arrives.

Answer

It means validating data on the server before sending it.

Answer

It means blocking the UI until data is fresh.

Question 14

By default, when does React Query (or SWR) automatically trigger a background refetch (revalidate)?

Accepted Answer

Correct Answer

Answer

Only when you explicitly call `refetch()`.

Answer

When the component mounts, when the window regains focus, and when the network reconnects.

Answer

Every 1 second.

Answer

Only when a mutation occurs.

Question 15

How do you handle Dependent Queries in React Query (where Query B needs the ID returned from Query A)?

Accepted Answer

Correct Answer

Answer

Chain them inside a `useEffect`.

Answer

Pass the `enabled` option to Query B. E.g., `enabled: !!queryAData?.userId`. Query B will safely sit idle and not execute until the condition becomes true.

Answer

Use a Redux Thunk.

Answer

Nest the `useQuery` hooks.

Question 16

What is `ReactQueryDevtools`?

Accepted Answer

Correct Answer

Answer

A separate paid software.

Answer

An in-app floating panel that visualizes the state of all queries and mutations, allowing you to see exactly what is in the cache, its status (fresh, stale, inactive), and manually trigger refetches for debugging.

Answer

A VSCode plugin.

Answer

A linter.

Question 17

If a `useQuery` fails with a network error, what is its default behavior?

Accepted Answer

Correct Answer

Answer

It crashes the React app immediately.

Answer

It automatically retries the request a few times (default 3) with exponential backoff before finally throwing an error or setting `isError: true`.

Answer

It alerts the user.

Answer

It falls back to `localStorage`.

Question 18

How does React Query handle Pagination?

Accepted Answer

Correct Answer

Answer

It doesn't, you must use Redux.

Answer

By keeping the page number in local component state and including it in the `queryKey` (e.g., `['posts', page]`). When `page` changes, the query key changes, triggering a fetch for the new page.

Answer

By downloading all data and slicing it locally.

Answer

By mutating the query cache directly.

Question 19

What is 'Infinite Scrolling' and how is it achieved in React Query?

Accepted Answer

Correct Answer

Answer

Scrolling down a page infinitely. Achieved via `useInfiniteQuery`, which manages an array of pages and provides functions like `fetchNextPage`.

Answer

A CSS animation.

Answer

An anti-pattern that shouldn't be used.

Answer

It is only available in GraphQL.

Question 20

If you want to transform the data returned by the server before the component receives it (e.g., sorting an array or extracting a property), where should you do it in React Query?

Accepted Answer

Correct Answer

Answer

Inside a `useEffect`.

Answer

Using the `select` option inside `useQuery`. This memoizes the transformation and ensures the component only re-renders if the transformed data actually changes.

Answer

By mutating the server database.

Answer

Inside the render function.

Question 21

Can React Query be used for GraphQL?

Accepted Answer

Correct Answer

Answer

No, it only supports REST.

Answer

Yes. React Query doesn't care how you fetch data (fetch, Axios, GraphQL). As long as the `queryFn` returns a Promise, React Query will manage the cache.

Answer

Only if you install Apollo.

Answer

Yes, but it disables caching.

Question 22

What is the primary architectural shift when migrating a legacy app from Redux to React Query?

Accepted Answer

Correct Answer

Answer

Moving from functional to class components.

Answer

Deleting 90% of the Redux boilerplate (thunks, reducers, action creators used for data fetching) and replacing it with simple `useQuery` hooks at the component level, leaving Redux ONLY for true client UI state.

Answer

Moving all state to Context.

Answer

Switching from REST to GraphQL.

Question 23

If a component mounts, unmounts quickly, and remounts, how does React Query prevent a memory leak?

Accepted Answer

Correct Answer

Answer

It stops the Javascript engine.

Answer

When the component unmounts, the query becomes 'inactive'. If no other components mount and request that key before the `gcTime` expires, the cache is garbage collected.

Answer

It throws an error.

Answer

It relies on the Redux store to hold the data.

Question 24

In Next.js, how does React Query integrate with Server-Side Rendering (SSR)?

Accepted Answer

Correct Answer

Answer

It doesn't, React Query is client-only.

Answer

You can prefetch queries on the server (e.g., inside `getServerSideProps` or Server Components), dehydrate the cache to HTML, send it to the browser, and rehydrate it, so the client sees the data instantly without fetching.

Answer

It runs the queries in a Web Worker.

Answer

It saves data to a cookie.

Question 25

Summary check: If you need to store the current status of a 'Dark Mode' toggle, should you use React Query, Redux, or Zustand?

Accepted Answer

Correct Answer

Answer

React Query.

Answer

Redux or Zustand. Dark Mode is local 'Client State', not data fetched from an asynchronous server endpoint. React Query is strictly for asynchronous data.

Answer

React Context.

Answer

None of the above.

Academy

ReactJS Interview Prep - State Management (Part 3)