State Management

Redux, Context API, and state management patterns

State Management Interview Questions

Master state management patterns for complex React applications.

1. Context API

import { createContext, useContext, useState } from 'react';

const UserContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

function useUser() {
  return useContext(UserContext);
}

2. Redux Pattern

// Action
const increment = () => ({ type: 'INCREMENT' });

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

// Store
import { createStore } from 'redux';
const store = createStore(counterReducer);

// Usage
store.dispatch(increment());

3. Redux Toolkit (Modern Redux)

import { createSlice, configureStore } from '@reduxjs/toolkit';

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

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

Learn More

Key Takeaways:

Context API for simple global state
Redux for complex state management
Redux Toolkit simplifies Redux setup
Keep state minimal and derived
Use selectors to access state