ReactJS Interview Prep - State Management (Part 6)

Question 1

In Redux Toolkit (RTK), what is `createEntityAdapter`?

Accepted Answer

Correct Answer

Answer

A tool for creating database schemas.

Answer

A utility that generates a set of prebuilt reducers and selectors for performing CRUD operations on normalized state structure (arrays converted to ID-keyed objects).

Answer

A middleware for API requests.

Answer

A tool to integrate Redux with React Router.

Question 2

What shape of state does `createEntityAdapter` generate?

Accepted Answer

Correct Answer

Answer

A single massive array.

Answer

An object containing an array of `ids` (to preserve ordering) and a dictionary of `entities` (keyed by ID, for fast O(1) lookups).

Answer

A string representation of a JSON object.

Answer

A Map object.

Question 3

How do you dispatch an action from outside a React component (e.g., in a vanilla JS utility file) using Redux?

Accepted Answer

Correct Answer

Answer

You must use a Custom Hook.

Answer

You export the `store` from your setup file, import it into the utility file, and directly call `store.dispatch(action)`. This works because the store is just a plain Javascript object.

Answer

It is strictly impossible.

Answer

You use `window.dispatchEvent`.

Question 4

What is 'Action Creator' in Redux?

Accepted Answer

Correct Answer

Answer

A script that auto-generates code.

Answer

A simple function that returns an action object. Instead of writing `dispatch({ type: 'ADD', payload: 5 })` everywhere, you write `dispatch(add(5))`, ensuring consistency and avoiding typos.

Answer

The React Component that fires the event.

Answer

A middleware function.

Question 5

Why must Redux Reducers be pure functions?

Accepted Answer

Correct Answer

Answer

To satisfy TypeScript strict mode.

Answer

Because Redux uses shallow reference equality checking (`oldState !== newState`) to determine if the state changed. If you mutate the state directly, the reference stays the same, and React-Redux will not trigger a re-render.

Answer

Because impure functions crash the browser.

Answer

Because it makes the bundle smaller.

Question 6

In RTK Query, what happens if a component unmounts while a query is currently fetching data?

Accepted Answer

Correct Answer

Answer

The app crashes with a memory leak.

Answer

RTK Query (and React Query) will typically allow the fetch to finish in the background and cache the result. However, if configured, it can automatically abort the network request using an `AbortController`.

Answer

The component is forced to stay mounted.

Answer

The data is saved to LocalStorage.

Question 7

How do you handle 'Derived Data' in a global state architecture?

Accepted Answer

Correct Answer

Answer

Store the derived data in a separate Redux variable.

Answer

Do NOT store derived data in state. Store only the minimal raw data, and calculate the derived data on the fly using a memoized Selector (like `createSelector` in Reselect).

Answer

Use a `useEffect` to constantly update it.

Answer

Use a local `useState`.

Question 8

What is 'Ducks' pattern in Redux?

Accepted Answer

Correct Answer

Answer

A testing framework.

Answer

A file architecture pattern where actions, action creators, and reducers for a specific feature are bundled into a single file (a 'duck'), rather than spread across separate 'actions' and 'reducers' folders.

Answer

A UI component library.

Answer

A method of fetching data.

Question 9

If a Redux action updates the store, but no React components are using `useSelector` to read that specific piece of state, what happens to the React app?

Accepted Answer

Correct Answer

Answer

The entire app re-renders.

Answer

Absolutely nothing. Only components explicitly subscribed to that piece of state via `useSelector` (or `connect`) will re-render.

Answer

React throws an unused state warning.

Answer

The store crashes.

Question 10

What is the difference between `useSelector` and `store.getState()`?

Accepted Answer

Correct Answer

Answer

They are identical.

Answer

`store.getState()` is a one-time read; it does not subscribe the component to changes. `useSelector` reads the value AND sets up a subscription so the component re-renders when the value changes.

Answer

`useSelector` only works in classes.

Answer

`store.getState()` returns a Promise.

Question 11

If a user logs out of an application, how should you clear the entire Redux store?

Accepted Answer

Correct Answer

Answer

Call `store.delete()`.

Answer

Write a root reducer that listens for a 'LOGOUT' action. If 'LOGOUT' is received, it passes `undefined` as the state to the combined reducers, forcing them all to return their initial defaults.

Answer

Refresh the browser page.

Answer

You must individually clear every single slice.

Question 12

What is 'Middleware' in the context of Zustand?

Accepted Answer

Correct Answer

Answer

Zustand does not support middleware.

Answer

Zustand supports middleware by wrapping the store creator. Popular built-in middlewares include `persist` (for LocalStorage), `devtools` (to connect to Redux DevTools), and `immer` (for mutable syntax).

Answer

A server-side routing layer.

Answer

A tool for compiling CSS.

Question 13

How does React Query identify which cache entry a Mutation should invalidate?

Accepted Answer

Correct Answer

Answer

It guesses based on the API url.

Answer

You explicitly pass the exact `queryKey` (e.g., `['posts']`) to `queryClient.invalidateQueries`. It then finds all queries matching that key and marks them as stale.

Answer

It invalidates the entire cache always.

Answer

It requires a Redux action.

Question 14

What happens if a component tries to read a Context value, but it is NOT wrapped in that Context's `Provider`?

Accepted Answer

Correct Answer

Answer

It crashes immediately.

Answer

The `useContext` hook will return the default value that was passed to `React.createContext(defaultValue)` when the context was initially created.

Answer

It returns null.

Answer

It throws a Redux error.

Question 15

Why is it generally a bad idea to put an entire complex object (like `{ theme, user, config }`) into a single React Context Provider value?

Accepted Answer

Correct Answer

Answer

Because it exceeds memory limits.

Answer

Because if ANY property (e.g., `theme`) changes, EVERY component consuming that context will re-render, even if they only needed the `user` property. This causes massive unnecessary renders.

Answer

Because it is not serializable.

Answer

Because it requires Redux.

Question 16

What is the primary use case for React's `useReducer` hook WITHOUT Context?

Accepted Answer

Correct Answer

Answer

Global state management.

Answer

Managing complex, highly intertwined local state within a single component (like a complex form or a drag-and-drop interface) where `useState` would require too many separate setters.

Answer

Server-side rendering.

Answer

Fetching data from APIs.

Question 17

In RTK Query, what is the difference between a `query` and a `mutation` endpoint?

Accepted Answer

Correct Answer

Answer

They are identical.

Answer

A `query` is for fetching data (GET) and is automatically cached and refetched. A `mutation` is for altering data (POST/PUT/DELETE) and is NOT cached, but is used to invalidate queries.

Answer

A `query` is synchronous, a `mutation` is asynchronous.

Answer

A `query` is for GraphQL, a `mutation` is for REST.

Question 18

How do you test a component that relies on Redux state?

Accepted Answer

Correct Answer

Answer

You cannot test it.

Answer

You render the component inside a mock `<Provider store={mockStore}>` in your testing environment (like Jest/React Testing Library), allowing the component to read from a controlled fake state.

Answer

You mock the `useSelector` hook directly.

Answer

You test the Reducer instead of the component.

Question 19

What is 'Shallow Equal' in the context of Redux selectors?

Accepted Answer

Correct Answer

Answer

A CSS property.

Answer

An optimization technique where React-Redux checks if the top-level properties of an object have changed. If they haven't, it prevents a re-render. You can pass `shallowEqual` as a second argument to `useSelector`.

Answer

A database comparison tool.

Answer

A type of Action.

Question 20

What is the 'Single Source of Truth' principle in Redux?

Accepted Answer

Correct Answer

Answer

Only one user can access the database.

Answer

The entire state of the application should be stored in one single object tree within a single store. This makes debugging, persisting, and inspecting the state trivial.

Answer

Only one API can be used.

Answer

Only one component can edit state.

Question 21

When deciding whether to put data in Redux or local `useState`, what is the best rule of thumb?

Accepted Answer

Correct Answer

Answer

Put everything in Redux.

Answer

Does this data need to be accessed by multiple unrelated components? Is it shared globally? Put it in Redux. Is it only used by this specific component and its direct children? Use `useState`.

Answer

Put arrays in Redux, strings in `useState`.

Answer

Use Redux for everything except forms.

Question 22

What is a 'Race Condition' in data fetching, and how do libraries like React Query/RTK Query solve it?

Accepted Answer

Correct Answer

Answer

When the network is too slow.

Answer

When multiple requests are fired, and an older request resolves AFTER a newer request, overwriting the new data with old data. These libraries solve it by discarding responses that don't match the most recent request ID/timestamp.

Answer

When two components render at once.

Answer

When CSS loads before JS.

Question 23

What is the purpose of the `extraReducers` field in Redux Toolkit's `createSlice`?

Accepted Answer

Correct Answer

Answer

To add CSS styles.

Answer

To allow the slice to listen and respond to action types that were defined OUTSIDE of the slice, such as actions from other slices or generated by `createAsyncThunk`.

Answer

To create redundant reducers.

Answer

To bypass the Redux store.

Question 24

How does Jotai achieve better performance than Context API for global state?

Accepted Answer

Correct Answer

Answer

By using WebAssembly.

Answer

By using an atomic model. When an atom updates, ONLY the specific components that have subscribed to that exact atom re-render. Context re-renders everything underneath the Provider.

Answer

By ignoring React's Virtual DOM.

Answer

By running on a separate thread.

Question 25

Congratulations on finishing the State Management module! In modern React (2024+), what is the most widely accepted architecture for a complex enterprise app?

Accepted Answer

Correct Answer

Answer

Put absolutely everything in Vanilla Redux.

Answer

Use React Query (or RTK Query/SWR) for all asynchronous server state. Use Zustand (or Redux Toolkit) strictly for global client UI state. Use `useState`/React Hook Form for local component state. Use Context for dependency injection.

Answer

Use Context API for everything.

Answer

Use MobX and jQuery.

Academy

ReactJS Interview Prep - State Management (Part 6)