React State Explained: A Complete Beginner Guide

Learn React State and the useState Hook with practical examples. Understand state updates, re-rendering, arrays, objects, state vs props, and React best practices.
React State Explained: How React Components Remember Data
So far, you've learned about React Components and Props.
Props allow components to receive data from a parent component.
However, what happens when data changes inside a component?
For example:
- a counter increases
- a user types in a form
- a menu opens or closes
- a theme switches between light and dark
- products are added to a cart
To handle changing data, React provides State.
State is one of the most important concepts in React because it makes applications interactive.
In this guide, you'll learn what State is, how it works, and how developers use it in real-world React applications.
React Hooks and State
Before learning State, it's important to understand React Hooks.
React Hooks are special functions that allow functional components to use React features such as state management, side effects, context, and more. Hooks make it possible to build powerful React applications without using class components.
One of the most commonly used Hooks is useState , which allows components to store and update data over time.
If you're new to Hooks, read our complete guide:
In this article, we'll focus specifically on the useState Hook and learn how React components can remember data, respond to user interactions, and automatically update the user interface when data changes.
Also make sure you understand:
These concepts will help you understand State more easily.
What is State in React?
State is data that belongs to a component and can change over time.
Unlike Props:
- Props are passed from parent components.
- State is managed inside the component itself.
Think of State as a component's memory.
It stores information that can change while the application is running.
Why Do We Need State?
Imagine a counter application.
Without State:
function Counter() {
let count = 0;
function increase() {
count++;
console.log(count);
}
return (
<>
<h1>{count}</h1>
<button onClick={increase}>
Increase
</button>
</>
);
}
The value changes internally, but the UI does not update.
This happens because React does not track regular variables.
State solves this problem.
Introducing useState
React provides a Hook called:
useState()
It allows components to store and update data.
Example:
import { useState } from "react";
Creating Your First State
Example:
import { useState } from "react";
function Counter() {
const [count, setCount] =
useState(0);
return (
<h1>{count}</h1>
);
}
Let's understand what is happening.
Understanding useState Syntax
Example:
const [count, setCount] =
useState(0);
Breakdown:
| Part | Purpose |
|---|---|
| count | Current value |
| setCount | Update function |
| 0 | Initial value |
React returns an array containing:
- current state value
- state updater function
Updating State
Example:
function Counter() {
const [count, setCount] =
useState(0);
return (
<>
<h1>{count}</h1>
<button
onClick={() =>
setCount(count + 1)
}
>
Increase
</button>
</>
);
}
Each click updates State and React automatically re-renders the UI.
Behind the Scenes
When React sees:
setCount(5);
React:
- Updates the State value.
- Re-renders the component.
- Updates the UI.
This automatic re-rendering is what makes React powerful.
State Causes Re-Renders
Whenever State changes:
setCount(10);
React runs the component again.
Example:
Counter()
β
Updated State
β
Component Re-Renders
β
UI Updates
This process keeps the UI synchronized with data.
Multiple State Variables
A component can have multiple State values.
Example:
function User() {
const [name, setName] =
useState("Sachin");
const [age, setAge] =
useState(21);
return (
<>
<h1>{name}</h1>
<p>{age}</p>
</>
);
}
This is very common in real applications.
State with Strings
Example:
const [theme, setTheme] =
useState("light");
Update:
setTheme("dark");
State with Booleans
Example:
const [isOpen, setIsOpen] =
useState(false);
Toggle:
setIsOpen(!isOpen);
Useful for:
- menus
- modals
- dropdowns
State with Arrays
Example:
const [skills, setSkills] =
useState([
"HTML",
"CSS",
"React"
]);
Adding new data:
setSkills([
...skills,
"Next.js"
]);
State with Objects
Example:
const [user, setUser] =
useState({
name: "Sachin",
role: "Developer"
});
Updating:
setUser({
...user,
role: "MERN Developer"
});
Real Project Usage
Blog Application
State can manage:
- search input
- selected category
- dark mode
- comment form values
Example:
const [search, setSearch] =
useState("");
E-commerce Website
State can manage:
- cart items
- filters
- wishlist
- quantity selectors
Example:
const [cartCount, setCartCount] =
useState(0);
Dashboard Application
State can manage:
- charts
- user settings
- notifications
- sidebar visibility
State vs Props
| Feature | Props | State |
|---|---|---|
| Owned By | Parent | Component |
| Mutable | No | Yes |
| Can Change | Through Parent | Directly |
| Purpose | Pass Data | Manage Data |
Understanding this difference is essential.
Common Beginner Mistakes
Directly Modifying State
Incorrect:
count = count + 1;
Correct:
setCount(count + 1);
Always use the updater function.
Forgetting State is Asynchronous
Incorrect:
setCount(count + 1);
console.log(count);
The logged value may not be updated immediately.
State updates are scheduled by React.
Mutating Arrays and Objects
Incorrect:
skills.push("React");
Correct:
setSkills([
...skills,
"React"
]);
Always create new arrays or objects.
Creating Unnecessary State
Not every variable needs State.
Use State only when UI updates depend on that value.
React State Interview Questions
- What is State in React?
- What is the purpose of useState?
- What happens when State changes?
- What is the difference between Props and State?
- Why should State not be mutated directly?
- Can State store arrays and objects?
- What causes a React component to re-render?
Watch Full React State Tutorial
If you prefer video learning, watch the complete tutorial below where we build counters, forms, toggles, and real-world examples using React State.
Watch the Full React State Tutorial
This tutorial demonstrates how State powers interactive React applications.
React vs Next.js
React State works exactly the same inside Next.js Client Components.
Whether you're building a React application or a Next.js application, understanding State is essential for creating interactive user experiences.
These concepts are commonly used together with State.
Build Something
Practice State by creating:
- Counter App
- Theme Toggle
- Todo App
- FAQ Accordion
- Shopping Cart Counter
These projects will help reinforce State management concepts.
Production Tip
Professional React developers usually:
- keep State as small as possible
- avoid unnecessary State
- never mutate State directly
- separate UI State from server data
- create reusable custom hooks for complex logic
Well-managed State makes applications easier to maintain and scale.
Why State Matters
State helps developers:
- create interactive interfaces
- update UI dynamically
- manage user interactions
- build real-world applications
- keep data synchronized with the UI
It is one of the core foundations of React development.
Conclusion
State allows React components to store and update data over time, making applications dynamic and interactive.
By using the useState Hook, developers can manage changing values and automatically update the UI whenever data changes.
Mastering State is a crucial step toward building modern React applications and understanding more advanced concepts such as Effects, Context API, and state management libraries.