ReactJS Interview Prep - State Management (Part 4)

Question 1

What is the technical signature of a Redux middleware?

Accepted Answer

Correct Answer

Answer

`function middleware(action) { return newState }`

Answer

`store => next => action => { ... }` (A curried function that receives the store API, the `next` dispatch method, and finally the `action`).

Answer

`(state, action) => newState`

Answer

`function middleware(store) { return store }`

Question 2

If a custom Redux middleware forgets to call `next(action)`, what happens to the application?

Accepted Answer

Correct Answer

Answer

The action is duplicated.

Answer

The action is "swallowed" and never reaches the reducer. The state will not update, and the app will likely appear frozen or unresponsive to that specific interaction.

Answer

The Redux store crashes immediately.

Answer

It bypasses the reducer and updates the DOM directly.

Question 3

How does Redux Thunk work under the hood?

Accepted Answer

Correct Answer

Answer

It wraps the Virtual DOM.

Answer

It intercepts every action. If the action is a *function* instead of an object, it calls that function, passing `dispatch` and `getState` as arguments. If it's a normal object, it just calls `next(action)`.

Answer

It converts synchronous reducers into asynchronous ones.

Answer

It compiles JSX.

Question 4

What is Redux Saga?

Accepted Answer

Correct Answer

Answer

A styling library for Redux.

Answer

A middleware library that uses ES6 Generators (`function*`) to make asynchronous side effects (like data fetching, accessing browser cache) easier to manage, test, and cancel.

Answer

A database architecture.

Answer

A replacement for React Query.

Question 5

In Redux Saga, what does the `yield takeEvery('ACTION_TYPE', workerSaga)` effect do?

Accepted Answer

Correct Answer

Answer

It ignores every action.

Answer

It listens for every dispatched action of that specific type, and spawns a new instance of the `workerSaga` to handle it, allowing multiple concurrent requests.

Answer

It takes the first action and ignores the rest.

Answer

It yields a random action.

Question 6

In Redux Saga, how does `takeLatest` differ from `takeEvery`?

Accepted Answer

Correct Answer

Answer

They are aliases for the same function.

Answer

If a user clicks a button 5 times rapidly, `takeLatest` will start 5 requests, but it will automatically CANCEL the previous 4 requests, ensuring only the result of the absolute latest request updates the store.

Answer

`takeLatest` waits for the network to finish before taking the next action.

Answer

`takeLatest` only works on the server.

Question 7

In Redux Saga, what do the `call` and `put` effects do?

Accepted Answer

Correct Answer

Answer

`call` mutates state; `put` renders the DOM.

Answer

`call` is used to execute asynchronous functions (like `fetch`). `put` is used to dispatch a new Redux action back to the store (similar to `dispatch` in Thunks).

Answer

`call` calls a reducer; `put` puts data in LocalStorage.

Answer

`call` throws an error; `put` catches it.

Question 8

Why are Redux Sagas incredibly easy to unit test compared to Redux Thunks?

Accepted Answer

Correct Answer

Answer

They don't require Jest.

Answer

Because Saga Effects (like `call` and `put`) do not actually execute the code. They just yield plain JavaScript objects describing what *should* happen. You can test the generator by checking if it yields the correct object, without mocking `fetch`.

Answer

They run synchronously.

Answer

They automatically mock APIs.

Question 9

What is Redux Observable?

Accepted Answer

Correct Answer

Answer

A tool to watch Redux state in DevTools.

Answer

A middleware based on RxJS (Reactive Extensions for JavaScript). It uses "Epics" to handle side effects via streams of actions using reactive operators like `map`, `filter`, and `mergeMap`.

Answer

A library that converts Redux to MobX.

Answer

A native browser API.

Question 10

Why has the popularity of Redux Saga and Redux Observable plummeted in recent years?

Accepted Answer

Correct Answer

Answer

They are no longer supported by React 18.

Answer

Because 90% of what they were used for was data fetching (caching, deduplication, cancellation). React Query and RTK Query now handle all of this automatically without requiring developers to learn Generators or RxJS.

Answer

They cause massive memory leaks.

Answer

They do not support TypeScript.

Question 11

What is RTK Query?

Accepted Answer

Correct Answer

Answer

A SQL query builder for Redux.

Answer

A powerful data fetching and caching tool built directly into Redux Toolkit (RTK). It provides similar caching, deduplication, and background refetching features to React Query, but stores the cache inside the Redux store.

Answer

A GraphQL client.

Answer

A tool for querying the DOM.

Question 12

How does RTK Query integrate with the Redux Store?

Accepted Answer

Correct Answer

Answer

It doesn't, it uses a separate cache.

Answer

It acts as an automatic slice. You provide the RTK Query reducer and middleware to `configureStore`, and it manages the cache dictionary directly inside the Redux state tree.

Answer

It writes directly to LocalStorage.

Answer

It requires a separate `<QueryProvider>`.

Question 13

In RTK Query, what is the purpose of `providesTags` and `invalidatesTags`?

Accepted Answer

Correct Answer

Answer

To tag components for CSS styling.

Answer

They act as the caching engine's dependency system. A query `providesTags: ['Post']`. A mutation `invalidatesTags: ['Post']`. When the mutation runs, RTK Query automatically refetches any query providing that tag.

Answer

To generate HTML `<meta>` tags.

Answer

To tag users in comments.

Question 14

When comparing Redux vs Context API, which is optimized for high-frequency state updates (e.g., tracking mouse position)?

Accepted Answer

Correct Answer

Answer

Context API.

Answer

Redux. Context forces every component consuming the context to re-render when the value changes. Redux (via `useSelector`) allows components to subscribe only to specific slices, bypassing unnecessary renders.

Answer

Neither, both will crash.

Answer

They are identically optimized.

Question 15

What is the 'Flux Standard Action' (FSA) pattern?

Accepted Answer

Correct Answer

Answer

A law passed by the W3C.

Answer

A community convention for shaping Redux actions. An FSA must have a `type` (string), and may optionally have `payload`, `error` (boolean), and `meta` properties. It guarantees a predictable action structure.

Answer

A framework for writing reducers.

Answer

A CSS naming convention.

Question 16

Why do large Redux applications use 'Selectors' (e.g., Reselect) instead of reading state directly in components?

Accepted Answer

Correct Answer

Answer

To satisfy the linter.

Answer

To decouple the component from the exact shape of the Redux store. If the store shape changes (e.g., `state.users` moves to `state.data.users`), you only update the selector function, not 100 components.

Answer

To convert state to props.

Answer

Because `useSelector` requires it.

Question 17

What does the `createSelector` function from the Reselect library (included in RTK) do?

Accepted Answer

Correct Answer

Answer

It selects DOM nodes.

Answer

It creates memoized selectors. If you derive data (like filtering an array of 10,000 items), it caches the result. It only recalculates if the input state changes, preventing massive performance bottlenecks during re-renders.

Answer

It creates Redux slices.

Answer

It fetches data.

Question 18

In the context of state management, what does it mean to 'Colocate' state?

Accepted Answer

Correct Answer

Answer

Putting all state into a single global Redux store.

Answer

Moving state as close as possible to the component that actually needs it. If only the `` needs to know if it's open, that state should live in ``, not in Redux.

Answer

Storing state in a database.

Answer

Putting state in the URL.

Question 19

How can you use the URL as a state management tool?

Accepted Answer

Correct Answer

Answer

You cannot.

Answer

By storing filters, search queries, and pagination in query parameters (e.g., `?page=2&sort=asc`). This is superior to Redux because users can bookmark the page or share the link, and the state is preserved.

Answer

By injecting Redux into the URL hash.

Answer

By using a `useLayoutEffect`.

Question 20

What is the primary drawback of using Context API for complex, highly dynamic global state?

Accepted Answer

Correct Answer

Answer

It doesn't support strings.

Answer

Context lacks fine-grained subscriptions. If a Provider's value is an object, ANY change to ANY property in that object forces EVERY consuming component to re-render, even if they don't care about the changed property.

Answer

It requires Redux Toolkit.

Answer

It is asynchronous.

Question 21

What is 'Prop Drilling'?

Accepted Answer

Correct Answer

Answer

A technique for optimizing the Virtual DOM.

Answer

The process of passing data from a high-level parent component down to a deeply nested child component through multiple layers of intermediate components that do not actually need the data themselves.

Answer

A security vulnerability in React.

Answer

A method of fetching data.

Question 22

How does 'Component Composition' solve Prop Drilling without using Context or Redux?

Accepted Answer

Correct Answer

Answer

By rendering the app on the server.

Answer

Instead of passing data down 5 levels, the parent component passes down the *Child Component itself* as a prop (e.g., `children`), injecting the data at the top level.

Answer

By using `React.cloneElement` on everything.

Answer

It doesn't solve prop drilling.

Question 23

What does it mean that Redux is 'Predictable'?

Accepted Answer

Correct Answer

Answer

It knows what the user will click next.

Answer

Because state is read-only and changes are made sequentially by pure reducer functions, the state of the app is completely deterministic. Given the same sequence of actions, you will always end up with the exact same state.

Answer

It automatically predicts API responses.

Answer

It enforces TypeScript types.

Question 24

If a developer mutates the state directly in a vanilla Redux reducer (e.g., `state.loading = true; return state`), what is the immediate consequence?

Accepted Answer

Correct Answer

Answer

The app speeds up.

Answer

The UI will not update. `react-redux` uses strict equality (`oldState === newState`) to determine if it should trigger a re-render. Mutating the object keeps the same reference, so the UI ignores the change.

Answer

Redux automatically fixes it.

Answer

The server throws a 500 error.

Question 25

Which of the following scenarios is the WORST use case for Redux?

Accepted Answer

Correct Answer

Answer

Storing the current logged-in user session.

Answer

Storing the text value of a single, isolated 'Contact Us' form input as the user types.

Answer

Storing a complex, multi-step e-commerce shopping cart.

Answer

Storing a globally toggled Dark Mode theme.

Academy

ReactJS Interview Prep - State Management (Part 4)