Introduction to React State

What is State?

Think of a light switch. It has two states: on and off. When you flip the switch, the room's appearance changes instantly. The light is either on or it's off. React components work in a similar way.

State is the memory of a component. It’s a plain JavaScript object that holds information about the component's current condition. When this information changes, React automatically re-renders the component to reflect the new state. This is the magic of React: you change the data, and the UI updates to match.

State is what allows your application to be dynamic and interactive. Without it, your app would just be a static page.

State

noun

A built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders.

This data can be anything: a counter's value, the text inside an input field, or a list of items fetched from a server. There are two main types of state you'll encounter: local and global.

Local State

Local state, often called component state, is data that is specific to a single component. It's like a component's private notes. No other component can see or modify it directly. This is the most common type of state you'll use.

Think about a search bar. The text you type into it is a perfect example of local state. The search bar component needs to know what the current text is, but the navigation bar or the footer couldn't care less. Other classic examples include tracking whether a dropdown menu is open or keeping count in a simple counter button.

import { useState } from 'react';

function Counter() {
  // 'count' is a local state variable.
  // It only exists inside the Counter component.
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      You clicked {count} times
    </button>
  );
}

In this example, the count variable is local state. Its value is managed entirely within the Counter component. The rest of your application is completely unaware of it.

Global State

Global state, or application-wide state, is data that needs to be accessed and managed by multiple components across your app. It’s like a central bulletin board where different parts of your application can read and post information.

Common use cases for global state include:

The currently logged-in user's information
The theme of the application (e.g., dark or light mode)
The contents of a shopping cart

In these scenarios, many different components, which might be far apart in the component tree, all need access to the same piece of data. Storing this information globally prevents you from having to pass data down through many layers of components.

When to Use Each

Deciding where to put state is a key skill in React development. A good rule of thumb is to always start by keeping state local. Only move it to a global level when it becomes clear that multiple, unrelated components need access to it.

Ask yourself these questions:

Is this data used by only one component? If yes, it's definitely local state.
Is this data needed by a few child components? You can often just pass the data down as props from the nearest common parent. This is called "lifting state up," and it's still a form of local state.
Is the data needed by many components, spread far and wide across the app? If so, it's a strong candidate for global state.

Characteristic	Local State	Global State
Scope	Contained within a single component.	Accessible throughout the application.
Use Case	UI element state (e.g., form input, toggle).	Shared data (e.g., user auth, theme).
Complexity	Simple, easy to manage.	Can add complexity to the app.
Default Choice	Always start here.	Use when local state becomes impractical.

Understanding the difference between local and global state is fundamental. It helps you build applications that are organized, efficient, and easier to debug.

Ready to check your understanding?

Quiz Questions 1/5

What is the primary purpose of state in a React component?

Quiz Questions 2/5

A user is typing their username into a login form. The value in the input field is a perfect example of local state.

Mastering when and where to use state is a huge step toward becoming a proficient React developer. It all comes down to managing data in a way that keeps your app predictable and maintainable.

React State Management Mastery