ReactJS Interview Prep - State Management (Part 2)

Question 1

What is Zustand?

Accepted Answer

Correct Answer

Answer

A CSS-in-JS library for styling components.

Answer

A small, fast, and scalable bear-bones state-management solution that uses simplified Flux principles, offering a much simpler API than Redux without requiring a `<Provider>` wrapper.

Answer

A component library for React Native.

Answer

A Server-Side Rendering framework.

Question 2

How do you create a store in Zustand?

Accepted Answer

Correct Answer

Answer

By defining a Redux Slice.

Answer

By calling the `create` function from `zustand` and passing it a callback that returns an object containing your state and functions (actions) to update that state.

Answer

By inheriting from `React.Component`.

Answer

By using `React.createContext`.

Question 3

How does a component consume state from a Zustand store?

Accepted Answer

Correct Answer

Answer

By using `useContext(Store)`.

Answer

By executing the custom hook returned by `create`, passing it a selector function to pick the specific piece of state it needs.

Answer

By wrapping the component in `connect()`.

Answer

By reading `window.zustand.state`.

Question 4

Why does Zustand NOT require wrapping your App in a `<Provider>` component?

Accepted Answer

Correct Answer

Answer

Because it uses Redux under the hood.

Answer

Because Zustand stores are just module-level variables (external to the React tree). The hooks subscribe directly to this external store, bypassing React Context entirely.

Answer

Because it modifies the Virtual DOM globally.

Answer

Because it uses LocalStorage.

Question 5

Can you use Zustand store actions (functions) completely outside of React components (e.g., in a vanilla JS utility file)?

Accepted Answer

Correct Answer

Answer

No, hooks can only be used in React components.

Answer

Yes. Because the store is external, you can call `useStore.getState()` to read it and `useStore.setState()` to update it from anywhere in your codebase, even outside React.

Answer

Only if you use `useEffect`.

Answer

Yes, but it won't update the UI.

Question 6

How do you handle asynchronous actions (like data fetching) in Zustand?

Accepted Answer

Correct Answer

Answer

You must install `zustand-thunk`.

Answer

You simply define an `async` function inside the store and use the `set` method when the `await` finishes. No special middleware is required.

Answer

You cannot do async actions in Zustand.

Answer

You must use Redux Saga.

Question 7

What is Jotai?

Accepted Answer

Correct Answer

Answer

A form validation library.

Answer

An atomic state management library for React. Instead of one giant global object (like Redux), state is broken down into tiny, independent, isolated pieces called 'atoms'.

Answer

A Japanese translation of Redux.

Answer

A WebGL rendering engine.

Question 8

In Jotai, how do you define and use an atom?

Accepted Answer

Correct Answer

Answer

Define it inside a Redux slice.

Answer

Create it outside the component using `const countAtom = atom(0)`, and use it inside the component exactly like `useState` using `const [count, setCount] = useAtom(countAtom)`.

Answer

By extending the `AtomComponent` class.

Answer

By wrapping the app in an `<AtomProvider>`.

Question 9

What is a 'Derived Atom' in Jotai?

Accepted Answer

Correct Answer

Answer

An atom that inherits from a Class.

Answer

An atom that doesn't hold its own state, but calculates its value dynamically by reading the values of other atoms.

Answer

An atom fetched from a database.

Answer

An atom that can never be updated.

Question 10

How does Recoil differ from Redux conceptually?

Accepted Answer

Correct Answer

Answer

Recoil is synchronous, Redux is asynchronous.

Answer

Redux uses a single centralized store (monolithic). Recoil, like Jotai, uses an atomic approach, mapping state graph nodes (atoms and selectors) directly into the React tree.

Answer

Recoil only works with Class components.

Answer

Recoil requires GraphQL.

Question 11

In Recoil, what is a `selector`?

Accepted Answer

Correct Answer

Answer

A CSS string like `.header > h1`.

Answer

A pure function that represents derived state in Recoil. It can read atoms or other selectors, and automatically recalculates when its dependencies change.

Answer

A component that renders a dropdown menu.

Answer

A hook to select DOM nodes.

Question 12

What happens if a Recoil `selector` performs an asynchronous operation (like a fetch)?

Accepted Answer

Correct Answer

Answer

It throws a fatal error.

Answer

Recoil natively integrates with React Suspense. If a component tries to read the async selector, it will Suspend (showing a fallback UI) until the promise resolves.

Answer

It returns undefined until finished.

Answer

It blocks the main thread.

Question 13

Why do some developers prefer Zustand over Recoil?

Accepted Answer

Correct Answer

Answer

Recoil is written in Python.

Answer

Zustand has a much smaller bundle size, doesn't require a `<RecoilRoot>` provider, works effortlessly outside of React, and has a much simpler API.

Answer

Recoil does not support TypeScript.

Answer

Zustand is officially maintained by Facebook.

Question 14

What is 'State Tearing'?

Accepted Answer

Correct Answer

Answer

When an array is split into two arrays.

Answer

A visual bug where different parts of the UI show different, out-of-sync values for the same state during a single React Concurrent render pass.

Answer

When CSS animations conflict with React.

Answer

When the browser window is resized rapidly.

Question 15

How do modern state libraries like Zustand and Redux Toolkit ensure compatibility with React 18's Concurrent Mode to prevent tearing?

Accepted Answer

Correct Answer

Answer

They use `useLayoutEffect` exclusively.

Answer

They internally utilize the `useSyncExternalStore` hook provided by React, which safely subscribes to external stores in a tear-free way.

Answer

They disable Concurrent Mode.

Answer

They force synchronous DOM updates.

Question 16

If you need to persist a Zustand store to `localStorage` (so data survives page refreshes), how do you do it?

Accepted Answer

Correct Answer

Answer

Manually write a `useEffect` on every page.

Answer

Use the built-in `persist` middleware provided by Zustand when creating the store.

Answer

Zustand cannot access localStorage.

Answer

Write a custom Redux Thunk.

Question 17

When comparing Redux (monolithic) to Jotai (atomic), which pattern is generally better for a highly dynamic dashboard where users can add/remove 100s of independent widgets?

Accepted Answer

Correct Answer

Answer

Redux, because of Time Travel.

Answer

Jotai (Atomic). Dynamic, highly fragmented state is difficult to type and manage in a single global object. Creating a new atom for each widget as it spawns is much more natural and performant.

Answer

Neither, use the Context API.

Answer

Redux, because it prevents tearing.

Question 18

What is MobX?

Accepted Answer

Correct Answer

Answer

A mobile framework for React Native.

Answer

A state management library that uses transparent functional reactive programming (TFRP). It relies heavily on observables and mutability, updating components automatically when the data they observe changes.

Answer

A Redux middleware for API calls.

Answer

A routing library.

Question 19

How does MobX know when to re-render a component?

Accepted Answer

Correct Answer

Answer

It polls the state every 16 milliseconds.

Answer

You wrap your component in an `observer` HOC. MobX tracks exactly which observable properties are read during render. When those specific properties mutate, it forces that specific component to re-render.

Answer

It hooks into the Virtual DOM diffing engine.

Answer

It requires you to call `forceUpdate()`.

Question 20

Which of the following describes the difference in mental model between Redux and MobX?

Accepted Answer

Correct Answer

Answer

Redux is for Vue, MobX is for React.

Answer

Redux enforces strict unidirectional immutability and explicit state updates via actions. MobX embraces mutability and reactive "magic" where things update automatically.

Answer

Redux requires classes, MobX requires hooks.

Answer

Redux is asynchronous, MobX is synchronous.

Question 21

If an application uses Redux Toolkit, React Query, and React Hook Form, what is the role of Redux Toolkit?

Accepted Answer

Correct Answer

Answer

It manages everything.

Answer

It manages global client UI state (like dark mode, sidebar open state, or complex multi-step wizards). React Query handles server state, and Hook Form handles local form state.

Answer

It only handles API fetching.

Answer

It acts as the router.

Question 22

Is the React Context API a 'State Management' system?

Accepted Answer

Correct Answer

Answer

Yes, it completely replaces Redux.

Answer

No. Context is a Dependency Injection system. It simply passes values down the tree. It doesn't manage state, cache data, or prevent re-renders (in fact, it often causes them). It must be paired with `useState` or `useReducer` to actually hold state.

Answer

Yes, but only for arrays.

Answer

No, it is only for CSS themes.

Question 23

When is the React Context API preferable to Redux/Zustand?

Accepted Answer

Correct Answer

Answer

For tracking mouse coordinates.

Answer

For low-frequency updates (like Auth Status, Theme, or Locale/Language) that are read by many components but change very rarely.

Answer

For fetching lists of data.

Answer

For managing form inputs.

Question 24

Can you use multiple state management libraries in the same app?

Accepted Answer

Correct Answer

Answer

No, it causes compiler errors.

Answer

Yes. It is very common to use React Query for server state, Zustand for global UI state, and Context for dependency injection. However, using Redux and Zustand together is redundant.

Answer

Yes, but only in Micro Frontends.

Answer

No, React limits you to one `<Provider>`.

Question 25

What is the concept of a 'State Machine' (e.g., using XState) in frontend development?

Accepted Answer

Correct Answer

Answer

A virtual machine running React.

Answer

A mathematical model of computation where the UI can only be in one of a finite number of states (e.g., 'idle', 'loading', 'success', 'error'), and explicit events transition the app between these states.

Answer

A Redux middleware for caching.

Answer

A tool for testing components.

Academy

ReactJS Interview Prep - State Management (Part 2)