ReactJS Interview Prep - State Management (Part 1)

Question 1

What is the role of the `Provider` component from the `react-redux` library?

Accepted Answer

Correct Answer

Answer

It provides internet access to the app.

Answer

It wraps your React application and uses the React Context API under the hood to make the Redux Store accessible to any component in the tree.

Answer

It provides a strict mode environment.

Answer

It compiles Redux actions.

Question 2

What is the primary problem that global state management libraries (like Redux or Zustand) attempt to solve?

Accepted Answer

Correct Answer

Answer

The inability of React to update the DOM efficiently.

Answer

'Prop Drilling' (passing props down through many layers of intermediate components that don't need the data) and synchronizing shared data across disjointed component trees.

Answer

The lack of CSS scoping in React components.

Answer

The asynchronous nature of `fetch` requests.

Question 3

What is the 'Flux' architecture?

Accepted Answer

Correct Answer

Answer

A database schema language created by Facebook.

Answer

An architectural pattern that enforces Unidirectional Data Flow. It consists of Actions, a Dispatcher, Stores, and Views.

Answer

A routing library for Single Page Applications.

Answer

The algorithm React uses for Virtual DOM diffing.

Question 4

In the Flux/Redux pattern, what is an 'Action'?

Accepted Answer

Correct Answer

Answer

A function that mutates the database.

Answer

A plain JavaScript object that describes WHAT happened. It must have a `type` property (usually a string), and can optionally carry a `payload` of data.

Answer

A React component that handles user input.

Answer

A middleware that intercepts network requests.

Question 5

In Redux, what is a 'Reducer'?

Accepted Answer

Correct Answer

Answer

A pure function that takes the current state and an Action, and returns a brand new state object based on that action.

Answer

A tool that minifies JavaScript bundles to reduce size.

Answer

A function that filters arrays based on user input.

Answer

A hook that reduces the number of components.

Question 6

Which of the following is an absolute, unbreakable rule of a Redux Reducer?

Accepted Answer

Correct Answer

Answer

It must run asynchronously.

Answer

It must mutate the existing state directly to ensure performance.

Answer

It must be a Pure Function. It cannot mutate the existing state, cannot perform side effects (like API calls), and must always return the exact same output for the same input.

Answer

It must be written in TypeScript.

Question 7

What is the Redux 'Store'?

Accepted Answer

Correct Answer

Answer

A third-party database like MongoDB.

Answer

A single, centralized JavaScript object that holds the entire state tree of your application. There is only one Store per Redux app.

Answer

A collection of local variables inside a component.

Answer

The browser's LocalStorage.

Question 8

How do React components communicate with the Redux Store to trigger a state change?

Accepted Answer

Correct Answer

Answer

By calling `store.setState()`.

Answer

By calling the `dispatch` function and passing it an Action object.

Answer

By mutating `store.current`.

Answer

By using a `useContext` setter.

Question 9

In modern Redux (using hooks), how does a component read data from the store?

Accepted Answer

Correct Answer

Answer

By using the `useSelector` hook, passing it a selector function that extracts the specific piece of state needed.

Answer

By using the `useState` hook.

Answer

By using `store.getState()` directly inside the render method.

Answer

By subscribing to the `useStore` hook.

Question 10

In modern Redux, how does a component get access to the `dispatch` function?

Accepted Answer

Correct Answer

Answer

It is passed automatically as a prop called `dispatch`.

Answer

By calling the `useDispatch` hook.

Answer

By importing it directly from the Redux store file.

Answer

By using `window.dispatch`.

Question 11

What is a 'Selector' in Redux?

Accepted Answer

Correct Answer

Answer

A CSS class that targets Redux components.

Answer

A pure function that takes the entire Redux state tree as an argument and returns a small, specific piece of that state (or a derived calculation from it).

Answer

A tool for selecting DOM nodes.

Answer

An action type string.

Question 12

If you use `useSelector((state) => state.auth)`, and `state.counter` updates, will your component re-render?

Accepted Answer

Correct Answer

Answer

Yes, any change to the store causes all connected components to re-render.

Answer

No. `useSelector` strictly compares the value it returns. Since `state.auth` did not change reference, it bails out and prevents the re-render.

Answer

Yes, but only in Strict Mode.

Answer

Only if `state.auth` is an object.

Question 13

What happens if a selector returns a NEW object literal or array map on every render? (e.g., `useSelector(state => state.users.map(u => u.name))`)

Accepted Answer

Correct Answer

Answer

It works perfectly and optimizes rendering.

Answer

It creates a massive performance bug. Because `.map()` returns a new array reference every time, `useSelector` thinks the data changed every single time the Redux store updates ANYTHING, causing the component to re-render endlessly.

Answer

Redux will throw a syntax error.

Answer

It caches the array automatically.

Question 14

What is Redux Middleware?

Accepted Answer

Correct Answer

Answer

A server that sits between the frontend and database.

Answer

Code that sits between the dispatch of an action and the moment it reaches the reducer. It can intercept, log, modify, or halt actions, and is essential for handling asynchronous logic.

Answer

A CSS preprocessor.

Answer

A routing wrapper.

Question 15

What is Redux Thunk?

Accepted Answer

Correct Answer

Answer

A testing framework for Redux.

Answer

The standard Redux middleware that allows you to write action creators that return a function instead of an action object. This function can contain asynchronous side-effects (like API calls) and can dispatch multiple actions.

Answer

A state persistence library.

Answer

A debugging tool.

Question 16

Why did the React community largely transition from 'Vanilla Redux' to 'Redux Toolkit (RTK)'?

Accepted Answer

Correct Answer

Answer

Vanilla Redux was deprecated by Facebook.

Answer

Vanilla Redux required massive amounts of boilerplate (action types, action creators, immutable spread operators, manual store setup). RTK provides opinionated utilities that dramatically reduce this boilerplate.

Answer

RTK runs on a separate thread.

Answer

Vanilla Redux did not support hooks.

Question 17

In Redux Toolkit, what is `createSlice`?

Accepted Answer

Correct Answer

Answer

A function to slice arrays.

Answer

A utility that accepts an initial state, an object of reducer functions, and a "slice name". It automatically generates the action creators and action types that correspond to the reducers.

Answer

A tool to split the code bundle.

Answer

A method to delete state.

Question 18

In Redux Toolkit's `createSlice`, how are you able to "mutate" the state (e.g., `state.value += 1`) if Redux requires reducers to be pure?

Accepted Answer

Correct Answer

Answer

RTK removed the purity requirement.

Answer

RTK uses a library called 'Immer' under the hood. Immer allows you to write "mutating" syntax, but intercepts it and safely produces a brand new immutable state object automatically.

Answer

It only works for numbers.

Answer

It mutates the actual store directly.

Question 19

If you return a value inside an RTK slice reducer that uses Immer, what happens?

Accepted Answer

Correct Answer

Answer

It throws an error.

Answer

You can EITHER "mutate" the draft state (and return nothing), OR you can return a brand new state object. You cannot do both simultaneously.

Answer

It merges the return value with the mutation.

Answer

It ignores the mutation.

Question 20

What does the `configureStore` API in Redux Toolkit do?

Accepted Answer

Correct Answer

Answer

It connects the store to MongoDB.

Answer

It wraps the vanilla Redux `createStore`, automatically combining your slice reducers, adding the Thunk middleware, and enabling the Redux DevTools extension out-of-the-box.

Answer

It configures the React Router.

Answer

It sets up CSS modules.

Question 21

What is the Redux DevTools Extension?

Accepted Answer

Correct Answer

Answer

A VSCode plugin for linting.

Answer

A browser extension that allows you to inspect every action dispatched, view the exact state tree at any point in time, and "time travel" by rewinding and replaying actions.

Answer

A tool for editing CSS in real time.

Answer

A performance profiler for React Native.

Question 22

Why is it an anti-pattern to store non-serializable data (like Promises, DOM nodes, or Class instances) in the Redux store?

Accepted Answer

Correct Answer

Answer

Because it makes the app crash immediately.

Answer

Because it breaks Time-Travel debugging and state persistence. The Redux store should only contain plain JSON-serializable data (objects, arrays, strings, numbers, booleans).

Answer

Because Redux cannot hold large objects.

Answer

Because it violates the CSS rules.

Question 23

What is 'State Normalization' in the context of Redux?

Accepted Answer

Correct Answer

Answer

Converting all strings to lowercase.

Answer

Structuring nested relational data (like posts and comments) flatly, using IDs as keys in an object (like a relational database), rather than deeply nested arrays, to make updates extremely fast and avoid duplicate data.

Answer

Ensuring all state variables are booleans.

Answer

Resetting the state on unmount.

Question 24

How does `createAsyncThunk` in Redux Toolkit simplify data fetching?

Accepted Answer

Correct Answer

Answer

It replaces the `fetch` API entirely.

Answer

It accepts an action type string and a promise-returning function, and automatically generates and dispatches `pending`, `fulfilled`, and `rejected` action types based on the promise lifecycle.

Answer

It makes API calls synchronous.

Answer

It automatically caches data in LocalStorage.

Question 25

In RTK, how do you listen to actions generated by `createAsyncThunk` inside a `createSlice`?

Accepted Answer

Correct Answer

Answer

Using the standard `reducers` property.

Answer

Using the `extraReducers` property. It allows a slice to respond to action types that were defined outside of it, such as a thunk's `.fulfilled` action.

Answer

By using a `useEffect`.

Answer

By modifying the Thunk directly.

Academy

ReactJS Interview Prep - State Management (Part 1)