All 5 State Management in Next.js Apps questions
More in State Management in Next.js Apps
What is local component state, and when is it enough for managing data in a Next.js application? When would you reach for a dedicated state management library, like Zustand or Redux, instead of just using React Context? How does the concept of state management differ in Next.js compared to a purely client side React application, given the presence of server components? How would you implement optimistic state updates for a feature like a like button, so the interface feels instant while a server action processes the actual update?
Advertisement
Next.js › State Management in Next.js Apps

How do you share state between multiple components that are not directly related, such as a shopping cart shown in both the header and a product page?

Intermediate

Answer

You use React Context to create a shared piece of state accessible from any component wrapped inside its provider, avoiding the need to pass that data down manually through many layers of unrelated components, which is especially useful for things like a shopping cart, theme setting, or logged in user information.
'use client';
import { createContext, useContext, useState } from 'react';

const CartContext = createContext(null);

export function CartProvider({ children }) {
  const [items, setItems] = useState([]);
  return <CartContext.Provider value={{ items, setItems }}>{children}</CartContext.Provider>;
}

export function useCart() {
  return useContext(CartContext);
}
Real-world example An online store shares the shopping cart state between its header icon showing the item count and the actual cart page itself, using a single context provider that wraps the entire application.

Common follow-ups: Where should a context provider be placed in the App Router's layout structure?;Does using context negatively affect performance for a large application?

Client Components & Hydration;Layouts & Templates
All 5 State Management in Next.js Apps questions