Understanding React State: How Components Remember and Update Data

Introduction

After learning about props, I started wondering how React components keep track of information that changes over time.

For example:

• A counter that increases when you click a button.
• A text box that updates as you type.
• A Like button that changes when it’s clicked.

Props allow components to receive data, but they can’t change that data.

So how does React handle values that need to change?

The answer is state.

In this article, I’ll explain what state is, why React uses it, and how to update state using the useState Hook.

What is State?

State is data managed by a React component that can change over time. Unlike props, state belongs to the component and can be updated. When state changes, React automatically re-renders the component and updates the UI.

Why Do We Need State?

JavaScript variables can change, but changing them does not tell React to update the UI. State solves this problem by notifying React whenever its value changes, causing the component to re-render.

Examples:

• Counter
• Login status
• Form input
• Shopping cart
• Theme (Dark/Light)

useState

useState is a React Hook used to create and manage state in a functional component.

const [count, setCount] = useState(0);

• count → Current value
• setCount() → Updates the value
• 0 → Initial value

Whenever setCount() is called, React updates the state and re-renders the component.

How React Updates the UI

When a state value changes, React automatically re-renders the component.

For example:

1. The component renders with the initial state.
2. The user performs an action, such as clicking a button.
3. The setter function (for example, setCount) updates the state.
4. React re-renders the component.
5. The updated state is displayed on the screen.

This automatic re-rendering is what makes React applications interactive.

Updating State

To update state, React provides a setter function returned by useState.

Example:

In this example, the App component passes both count and setCount (named counter) to the Count component.

How it works

Whenever state changes, React re-renders the component.

The initial state is:

const [count, setCount] = useState(0);

Output:

0

When the user clicks Increment:

The counter prop refers to the setCount function passed from the parent, so calling:

counter(count + 1);

updates the state to the new value.

In this example, the state is created in the App component using useState. The current value (count) and the setter function (setCount) are passed to the Count component as props. When a button is clicked, the child component calls the setter function to update the parent’s state. React then automatically re-renders the UI and displays the new count.

Multiple State Variables

A component can have more than one state.

import { useState } from "react";

function User() {

  const [name, setName] = useState("Srav");
  const [age, setAge] = useState(10);

  return (
    <>
      
{name}
      
{age}
    >
  );
}

Each call to useState creates a separate piece of state, allowing a component to manage multiple values independently.

State vs Variables

State vs Props

Rules of State

• Always use the setter function returned by useState (for example, setCount) to update state.
• Don’t modify state directly.
• State updates trigger a re-render.
• Each component manages its own state.

Conclusion

State is one of the most important concepts in React because it allows components to remember information and update the user interface when that information changes.

Unlike props, which receive data from a parent component, state belongs to the component itself. By combining props and state, React components become both reusable and interactive.

As I continue learning React, I’m beginning to see that state is what makes React applications interactive. It allows the UI to respond to user actions and keeps the interface in sync with changing data.

Key Takeaways

• State stores data inside a component.
• State can change over time.
• useState creates state in a functional component.
• Updating state causes React to re-render the component.
• State makes React applications interactive.

What’s Next?

After learning how components manage their own data with state, the next step is understanding events.

In the next article, I’ll explore event handling in React and learn how to respond to user actions such as button clicks, typing in input fields, and submitting forms.