Local vs Global State

When building React applications, deciding where a piece of state should live is one of the most important architectural decisions you will make. State in React is generally categorized into two main types: Local State and Global State.

Local State

Local state is data that is only needed by one specific component (or perhaps one component and its immediate children). It does not affect the rest of the application.

Examples of Local State:

The current text inside a specific <input> field.
Whether a specific dropdown menu is currently open or closed.
The current active tab in a <TabView> component.
The “hover” state of a button.

How to manage Local State:
Local state should always be managed using React’s built-in hooks: useState or useReducer.

// Perfect use case for Local State
function AccordionItem({ title, content }) {
  // No other component cares if this specific item is open
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>{title}</button>
      {isOpen && <p>{content}</p>}
    </div>
  );
}

Global State

Global state is data that is needed by many components across different, often unrelated parts of your application.

Examples of Global State:

The currently authenticated user’s profile and token.
The user’s UI preferences (e.g., Light Mode vs. Dark Mode).
The contents of a shopping cart (needed by the Navbar, the Checkout page, and the Product page).
The current language/locale settings.

How to manage Global State:
If you put global state in the root App component and try to pass it down using props, you will experience severe “Prop Drilling.” Instead, you use dependency injection tools.

For simple/infrequent updates: Use the built-in React Context API.
For complex/frequent updates: Use a state management library like Redux, Zustand, or Jotai.

// Example using Context for Global State
function Navbar() {
  // Navbar needs the user data
  const { user } = useContext(AuthContext);
  return <div>Welcome, {user.name}</div>;
}

function ProfilePage() {
  // ProfilePage also needs the exact same user data
  const { user } = useContext(AuthContext);
  return <img src={user.avatar} />;
}

The Golden Rule of State Placement

Keep state as local as possible.

A common mistake for beginners is to put everything into a global Redux store or a massive Context provider. This is an anti-pattern.

Global state makes components harder to test, harder to reuse, and can cause significant performance issues (unnecessary re-renders) if not managed perfectly.

Only elevate state to the global level if it is genuinely required by multiple, structurally distant components in your application.

Interview Questions

Q: What is the primary drawback of putting all of an application’s state into a global store (like Redux)?
A: It destroys component encapsulation and reusability. A highly localized piece of state (like whether a specific dropdown is open or closed) has no business being global. Furthermore, putting rapidly changing localized state into a global store can trigger unnecessary re-renders across completely unrelated parts of the application.