React Expanded State Management | CodePath Web Development Cliffnotes

Overview

State management is a crucial aspect of React applications. As applications grow, managing where and how state is stored becomes increasingly important for maintainability and performance.

This guide covers:

Different types of state and when to use each
Common patterns for state management
Built-in React solutions (Context, useReducer)
Custom hooks for state management
Best practices and decision-making guidelines

Types of State Management

State can be managed in multiple ways, and it not just initiated via useState. Here are a few of the more common ways state can be managed:

1. Local State with useState

Local state with useState is the simplest form of state management. It's perfect for component-specific data that doesn't need to be shared with other components. We can also use multiple useState hooks in a single component.

function Counter() {
  // Simple local state example
  const [count, setCount] = useState(0);
  
  // Component-specific state that doesn't need sharing
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      {isHovered && <span>Hover tooltip!</span>}
    </div>
  );
}

🎥 Video: Learn useState in 15 minutes

2. Lifting State Up

When multiple components need to share state, we can "lift" the state to their closest common ancestor. This is a common pattern in React and is a good way to manage state. Lifting state is essentially where we move the state from the local component up higher in the component tree, so that we can use it in multiple components.

Real-World Example: Shopping Cart

Imagine building an e-commerce app with these components:

ProductList - Shows all products
ProductDetail - Shows info about a specific product
ShoppingCart - Shows items in the cart
CartIcon - Shows number of items in cart in the header

Before Lifting State Up ❌ (wrong approach) 😵

If we don't lift the state up, each component will manage its own state independently. This is a problem because each component will have its own version of the state, and we won't be able to make updates consistently across all components.

// Each component manages its own cart state independently
function ProductList() {
  // Local cart state only accessible in this component
  const [cartItems, setCartItems] = useState([]);
  
  const addToCart = (product) => {
    setCartItems([...cartItems, product]);
  };
  
  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <button onClick={() => addToCart(product)}>
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
}

function ProductDetail({ product }) {
  // Duplicate cart state - not synced with ProductList
  const [cartItems, setCartItems] = useState([]);
  
  const addToCart = (product) => {
    setCartItems([...cartItems, product]);
  };
  
  return (
    <div>
      <h2>{product.name}</h2>
      <p>{product.description}</p>
      <button onClick={() => addToCart(product)}>
        Add to Cart
      </button>
    </div>
  );
}

function CartIcon() {
  // No access to cart items from other components
  // This will always show 0 unless we add complex communication
  const [itemCount, setItemCount] = useState(0);
  
  return (
    <div className="cart-icon">
      Cart: {itemCount} items
    </div>
  );
}

function ShoppingCart() {
  // Another duplicate cart state - not synced with others
  const [cartItems, setCartItems] = useState([]);
  
  return (
    <div className="shopping-cart">
      <h2>Your Cart</h2>
      {cartItems.length === 0 ? (
        <p>Your cart is empty</p>
      ) : (
        <ul>
          {cartItems.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

// App has no way to coordinate between these components
function EcommerceApp() {
  return (
    <div className="app">
      <Header>
        <CartIcon />
      </Header>
      
      <main>
        <ProductList />
        <ProductDetail product={selectedProduct} />
      </main>
      
      <ShoppingCart />
    </div>
  );
}

Problems with this approach 😭

This is obviously problematic. Just look at this diagram! It's a mess: 🫣 We have duplicate state in each component, and we don't have a single source of truth for the cart data. Data is inconsistent, and we have to manually keep the state in sync between components.

State duplication diagram

Data Inconsistency: Adding an item in ProductList doesn't update the cart in ShoppingCart
Duplicated State: Each component maintains its own version of the cart
Broken UI: CartIcon never shows the correct number of items
Poor User Experience: Items added to cart seem to disappear when navigating between pages

After Lifting State Up ✅ (right approach) 😎

To solve this problem, we move the cart state up to the parent component, EcommerceApp. This way, the cart state is shared across all components that need it.

function EcommerceApp() {
  // Cart state is lifted up to be shared across components
  const [cartItems, setCartItems] = useState([]);

  // Function to add items to cart
  const addToCart = (product) => {
    setCartItems([...cartItems, product]);
  };

  return (
    <div className="app">
      <Header>
        {/* CartIcon needs to know number of items */}
        <CartIcon itemCount={cartItems.length} />
      </Header>
      
      <main>
        {/* ProductList and ProductDetail need to add items */}
        <ProductList 
          products={products} 
          onAddToCart={addToCart} 
        />
        
        {/* ProductDetail also needs to add items */}
        <ProductDetail 
          product={selectedProduct} 
          onAddToCart={addToCart} 
        />
      </main>
      
      {/* ShoppingCart needs the full cart data */}
      <ShoppingCart 
        items={cartItems} 
        onUpdateCart={setCartItems} 
      />
    </div>
  );
}

Without lifting state, we have to:

Store cart data in each component separately (causing data inconsistencies)
Or use complex communication channels between components (making code harder to maintain)

Lifting the state up creates a "single source of truth" for the cart data.

Here's a visual representation of how the correct approach looks:

State lifting diagram

🎥 Video: Lifting State in React JS in 40 Seconds

3. Context API Patterns

Context provides a way to share state across many components without prop drilling. This is a good way to manage state when we have a lot of components that need access to the same state. We can also use multiple context providers in a single component tree.

// Create the context
const ThemeContext = createContext();

// Create a provider component
function ThemeProvider({ children }) {
  // State that will be shared
  const [theme, setTheme] = useState('light');
  
  // Value object to be provided
  const value = {
    theme,
    toggleTheme: () => {
      setTheme(current => current === 'light' ? 'dark' : 'light')
    }
  };

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

// Custom hook for using the context
function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

// Example usage in components
function ThemedButton() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <button 
      onClick={toggleTheme}
      style={{ 
        background: theme === 'light' ? '#fff' : '#000',
        color: theme === 'light' ? '#000' : '#fff'
      }}
    >
      Toggle Theme
    </button>
  );
}

// The App component is wrapped in a ThemeProvider.  This means that the theme state and toggleTheme function are available to all components in the component tree.
<ThemeProvider>
  <App />
</ThemeProvider>

Context flow visualization:

Diagram: Context API flow

🎥 Video: Context API Tutorial For Beginners

4. useReducer with Context

For complex state logic, combining useReducer with Context provides a powerful state management solution. This is a good way to manage state when we have complex logic that needs to be shared across multiple components, or even a single component that needs to control multiple pieces of state in a clean way.

Real-World Example: User Authentication System

Let's build a complete authentication system that:

Handles login/logout
Manages user data
Tracks authentication state
Handles errors

This requires complex state with multiple related pieces that many components need access to:

// Define the possible authentication states
const ACTIONS = {
  LOGIN_REQUEST: 'LOGIN_REQUEST',
  LOGIN_SUCCESS: 'LOGIN_SUCCESS',
  LOGIN_FAILURE: 'LOGIN_FAILURE',
  LOGOUT: 'LOGOUT',
  UPDATE_USER: 'UPDATE_USER'
};

// Authentication reducer handles all auth-related state changes
function authReducer(state, action) {
  switch (action.type) {
    case ACTIONS.LOGIN_REQUEST:
      return {
        ...state,
        isLoading: true,
        error: null
      };
    case ACTIONS.LOGIN_SUCCESS:
      return {
        ...state,
        isLoading: false,
        isAuthenticated: true,
        user: action.payload,
        error: null
      };
    case ACTIONS.LOGIN_FAILURE:
      return {
        ...state,
        isLoading: false,
        isAuthenticated: false,
        error: action.payload
      };
    case ACTIONS.LOGOUT:
      return {
        ...state,
        isAuthenticated: false,
        user: null
      };
    case ACTIONS.UPDATE_USER:
      return {
        ...state,
        user: {
          ...state.user,
          ...action.payload
        }
      };
    default:
      return state;
  }
}

// Create auth context
const AuthContext = createContext();

// Create provider component
function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, {
    isAuthenticated: false,
    isLoading: false,
    user: null,
    error: null
  });

  // Login function - would connect to your API
  const login = async (credentials) => {
    try {
      // Dispatch action to update loading state
      dispatch({ type: ACTIONS.LOGIN_REQUEST });
      
      // Call API (simplified example)
      const response = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify(credentials)
      });
      
      if (!response.ok) {
        throw new Error('Login failed');
      }
      
      const user = await response.json();
      
      // Save auth token in localStorage
      localStorage.setItem('authToken', user.token);
      
      // Update state with user data
      dispatch({ 
        type: ACTIONS.LOGIN_SUCCESS, 
        payload: user 
      });
    } catch (error) {
      // Handle login error
      dispatch({ 
        type: ACTIONS.LOGIN_FAILURE, 
        payload: error.message 
      });
    }
  };

  // Logout function
  const logout = () => {
    localStorage.removeItem('authToken');
    dispatch({ type: ACTIONS.LOGOUT });
  };

  // Update user profile
  const updateProfile = (userData) => {
    dispatch({ 
      type: ACTIONS.UPDATE_USER, 
      payload: userData 
    });
  };

  return (
    <AuthContext.Provider value={{ 
      ...state, 
      login, 
      logout,
      updateProfile 
    }}>
      {children}
    </AuthContext.Provider>
  );
}

// Custom hook for using auth context
function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

// Example usage in a login form
function LoginPage() {
  const { login, isLoading, error } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    login({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Logging in...' : 'Log In'}
      </button>
    </form>
  );
}

// Example usage in profile page
function ProfilePage() {
  const { user, isAuthenticated, logout } = useAuth();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  
  return (
    <div>
      <h1>Welcome, {user.name}!</h1>
      <p>Email: {user.email}</p>
      <button onClick={logout}>Log Out</button>
    </div>
  );
}

// App with protected routes
function App() {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route path="/profile" element={<ProfilePage />} />
          <Route path="/" element={<HomePage />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
}

Why useReducer + Context Works Well Here

Complex State Logic: Authentication has multiple related states (loading, errors, user data)
Predictable State Updates: All auth state changes follow specific patterns
Global Access: Many components across the app need auth data
Maintainability: All auth logic is centralized in one place
Testability: Reducer functions are pure and easy to test

This pattern creates a complete authentication system that any component in your app can access using the useAuth() hook.

Here's a visualization of the authentication system's component structure and data flow:

Authentication system diagram

🎥 Video: Learn useReducer In 20 Minutes

State Management Decision Flow

Here's a flowchart to help decide which state management approach to use:

State management decision flow

Best Practices

Here are a couple best practices that can help us manage state in a clean and efficient way.

1. State Location

It's important to choose the right level for your state. Depending on the use case, we can choose to store state at the component level, lifted to a parent component, or in a global context.

State location decision flow

2. State Colocation

Keep state as close as possible to where it's used. This makes it easier to reason about the state and the component's behavior.

// ❌ Bad: State too high in the tree
function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <Header />
      <Sidebar isOpen={isOpen} setIsOpen={setIsOpen} />
      <Content />
    </div>
  );
}

// ✅ Good: State colocated with component that uses it
function Sidebar() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        Toggle
      </button>
      {isOpen && <nav>...</nav>}
    </div>
  );
}

🎥 Video: A cure for React useState hell (useReducer)

Additional Resources

📖 React Context Documentation
📖 useReducer Documentation

React Expanded State ManagementEdit PagePage History