State Management (Advanced / Global State) — Interview Questions & Answers

Ques 1: What is state management in React?

Ans: State management is the process of handling and sharing data across components in a React app. It ensures that the UI stays in sync with the underlying data model.

React provides both local and global state management approaches.

Ques 2: What are the types of state in React?

1. Local State – Managed within a single component using useState.
2. Global State – Shared across multiple components (e.g., using Context or Redux).
3. Server State – Data fetched from an API.
4. URL State – Data in the URL (query params, route path).

Ques 3: Why do we need state management?

• To handle shared data between components.
• To keep UI consistent.
• To simplify complex interactions.
• To prevent “prop drilling.”

Ques 4: What is “lifting state up” in React?

Ans: “Lifting state up” means moving shared state to a common ancestor component so that multiple child components can access or modify it via props.

Example:

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <><ChildA count={count} />
      <ChildB setCount={setCount} />
    </>
  );
}

Ques 5: When should you lift state up?

Ans: When multiple sibling components need access to the same data or must synchronize their behavior.

Ques 6: What are the drawbacks of lifting state up?

• Increases complexity in the parent component.
• Can cause unnecessary re-renders in child components.
• Not scalable for large applications.

Ques 7: What is the React Context API?

Ans: The Context API allows you to share state globally without prop drilling.

It’s made up of three parts:

• React.createContext()
• <Provider>
• useContext()

Ques 8: How does the Context API work?

1. Create a context using createContext().
2. Wrap components inside a <Provider> to share data.
3. Access the data using useContext() hook.

Example:

const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}

function Child() {
  const theme = useContext(ThemeContext);
  return <p>Theme: {theme}</p>;
}

Ques 9: What is the difference between Context API and Redux?

Ques 10: What is Redux?

Ans: Redux is a predictable state container for JavaScript apps.

It manages global state using a single store and follows three core principles:

1. Single source of truth
2. State is read-only
3. Changes made with pure functions (reducers)

Ques 11: What are the main components of Redux?

1. Store: Holds the entire state tree.
2. Actions: Describe what happened.
3. Reducers: Specify how the state changes.
4. Dispatch: Sends actions to the reducer.
5. Selectors: Retrieve specific data from state.

Ques 12: What is Redux Toolkit (RTK)?

Ans: Redux Toolkit is the official, opinionated way to write Redux logic.

It simplifies store setup, reduces boilerplate, and includes powerful tools like:

• createSlice()
• configureStore()
• createAsyncThunk()

Ques 13: Why use Redux Toolkit instead of traditional Redux?

• Less boilerplate
• Built-in immutability
• Async actions made easy
• Developer-friendly APIs

Ques 14: What is a reducer in Redux?

Ans: A pure function that takes state and action as arguments and returns a new state.

function counterReducer(state = 0, action) {
  switch(action.type) {
    case 'INCREMENT': return state + 1;
    case 'DECREMENT': return state - 1;
    default: return state;
  }
}

Ques 15: What is an action in Redux?

Ans: An action is a plain JavaScript object with a type and optional payload.

{ type: 'INCREMENT', payload: 5 }

Ques 16: What is a store in Redux?

Ans: The centralized state container that holds your entire application state.

Created using:

const store = configureStore({ reducer: counterReducer });

Ques 17: How does data flow in Redux?

1. UI dispatches an action.
2. Reducer handles it and returns new state.
3. Store updates and re-renders the UI.

This flow is unidirectional (one-way data flow).

Ques 18: What is middleware in Redux?

Ans: Middleware extends Redux’s capabilities by handling side effects like logging or async actions.

Example: redux-thunk, redux-saga.

Ques 19: What is createSlice() in Redux Toolkit?

Ans: A helper that automatically generates action creators and reducers for a slice of state.

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
});

Ques 20: What are alternative state management libraries in React?

• Zustand – Lightweight, minimal syntax.
• Recoil – Fine-grained state control.
• Jotai – Atomic state model.
• MobX – Reactive and observable-based.
• XState – Finite state machine approach.

Ques 21: When should you choose Redux over Context API?

Ans: When:

• The app has complex state interactions.
• You need predictable updates.
• You require middleware for async or logging.
• You want DevTools debugging.

Ques 22: What is persisting state?

Ans: Persisting state means saving state to storage (like localStorage or sessionStorage) so that it remains available after page reload.

Ques 23: How can you persist Redux state?

Ans: Using redux-persist:

import storage from 'redux-persist/lib/storage';
const persistConfig = { key: 'root', storage };
const persistedReducer = persistReducer(persistConfig, rootReducer);

Ques 24: What are the common issues in state management?

• Unnecessary re-renders
• Mutating state directly
• Prop drilling
• Overcomplicating small apps with Redux

Ques 25: How do you debug state management issues in React?

• Use React DevTools and Redux DevTools
• Log actions and state transitions
• Use proper keys and memoization