State in React

Introduction

One of the most important concepts in React is State.

State allows React components to store and manage dynamic data. It helps applications become interactive by updating the user interface whenever data changes.

In React, state is mainly used inside components to control dynamic behavior and UI updates.

In this tutorial, you will learn what state is, why it is used, syntax, examples, real-life applications, common mistakes, interview questions, and best practices.

What is State in React?

State is a built-in React object used to store and manage dynamic data inside a component.

OR

State allows components to remember and update information.

When state changes:

• React automatically re-renders the component
• The UI updates automatically

Why State is Used in React?

State is used because modern applications need dynamic and interactive content.

Examples:

• Updating counters
• Typing in forms
• Showing notifications
• Managing login status
• Handling themes

Without a state, these features would not work properly.

Features of State in React

1. Dynamic Data Management

State stores changing data.

2. Automatic UI Updates

React updates the UI automatically when state changes.

3. Component-Specific

Each component can have its own state.

4. Interactive Applications

State makes applications interactive and responsive.

Syntax of State in Functional Components

React uses the useState Hook to create state in functional components.

const [state, setState] = useState(initialValue);

Understanding the Syntax

1. state

Current state value.

2. setState

Function used to update state.

3. initialValue

Default state value.

Example of State in React

import { useState } from "react";
function Counter() {
 const [count, setCount] = useState(0);
 return (
   <div>
     <h1>{count}</h1>
     <button onClick={() => setCount(count + 1)}>
       Increment
     </button>
   </div>
 );
}
export default Counter;

Output

Initially:

After clicking button:

How State Works in React?

1. Component renders with initial state
2. User interacts with UI
3. State updates using setter function
4. React re-renders component
5. Updated UI appears automatically

Real-Life Example of State

Suppose you are creating a social media app.

State can manage:

• Like counts
• Comments
• Notifications
• User status
• Messages

Whenever data changes, React updates the UI instantly.

State with String Example

import { useState } from "react";
function User() {
 const [name, setName] = useState("Gaurav");
 return (
   <div>
     <h1>{name}</h1>
     <button onClick={() => setName("Rahul")}>
       Change Name
     </button>
   </div>
 );
}

Output

After button click:

State with Boolean Example

import { useState } from "react";
function App() {
 const [isLoggedIn, setIsLoggedIn] =
   useState(false);
 return (
   <div>
     <h1>
       {isLoggedIn ? "Welcome" : "Please Login"}
     </h1>
     <button onClick={() => setIsLoggedIn(true) } > Login </button>
   </div>
 );
}

Output

Initially:

After clicking Login:

State with Array Example

import { useState } from "react";
function App() {
 const [fruits, setFruits] = useState([
   "Apple",
   "Mango"
 ]);
 return (
   <ul>
     {fruits.map((fruit, index) => (
       <li key={index}>{fruit}</li>
     ))}
   </ul>
 );
}

Output

State with Object Example

import { useState } from "react";
function User() {
 const [user, setUser] = useState({
   name: "Gaurav",
   age: 25
 });
 return (
   <h1>
     {user.name} - {user.age}
   </h1>
 );
}

Difference Between Props and State

State in Class Components

Before Hooks, class components used state.

Example

import React, { Component } from "react";
class Counter extends Component {
 constructor() {
   super();
   this.state = {
     count: 0
   };
 }
 render() {
   return (
     <h1>{this.state.count}</h1>
   );
 }
}

Functional vs Class State Management

Advantages of State in React

Common Mistakes in React State

1. Directly Modifying State

Wrong:

count = count + 1;

Correct:

setCount(count + 1);

2. Forgetting useState Import

Wrong:

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

Correct:

import { useState } from "react";

3. Updating State Incorrectly for Objects

Wrong:

setUser({
 age: 30
});

Correct:

setUser({
 ...user,
 age: 30
});

4. Using State for Static Data

Static values should use normal variables instead of state.

5. Too Many State Variables

Too many states can make components difficult to manage.

Real-World Applications of State

State is heavily used in:

• E-commerce Websites
• Social Media Apps
• Dashboards
• Chat Applications
• Banking Apps
• Online Editors

Examples:

• Shopping cart count
• Theme switching
• Notifications
• User authentication
• Form handling

Real-Life Analogy of State

Think of a state like memory in a mobile app.

For example:

• Notification count changes dynamically
• Login status changes after authentication
• Cart items update when products are added

React state manages all these changes efficiently.

What is state – Interview Questions

ReactJS: What is state – Objective Questions (MCQs)

Conclusion

State is one of the most important concepts in React because it allows applications to become dynamic and interactive. It helps components store and update data while automatically updating the user interface.

Modern React applications mainly use the useState Hook inside functional components because it provides a cleaner and simpler approach to state management.

Continue Learning React