State in ReactJS Explained Simply: A Complete Beginner’s Guide

ReactJS is one of the most popular JavaScript libraries for building modern user interfaces. One of the most important concepts in React is State. If you want to build dynamic, interactive, and real-world React applications, understanding state is absolutely essential.

In this beginner-friendly guide, you will learn:

• What state is in ReactJS
• Why state is used
• Where state is used
• How state works in React
• The useState hook
• State vs props
• How to update state correctly
• Common mistakes beginners make

What Is State in ReactJS?

State in ReactJS is a built-in object that stores data which can change over time. In simple words, developers use state to manage dynamic data in a React component. When the state changes, React re-renders the component and shows the updated data on the screen.

For example, React uses state to manage user login status, form input values, counter values, toggle states, shopping cart items, and API response data.

So we can say that State is the memory of a React component. It remembers information that can change while the user interacts with the application.

Why Is State Used in React?

State is used because modern websites are interactive, not static. Without state the UI would never update, buttons would not respond, forms would not work properly, user actions would not change anything.

Benefits of Using State

• Makes the UI dynamic
• Updates data without page reload
• Improves user experience
• Helps manage component behavior
• Enables real-time updates

Where Is State Used in React Applications?

Developers use state inside React components when data changes over time. They also use it when data depends on user interaction, comes from an API, or affects what appears on the screen.

Real-World Examples

• Login form → user input stored in state
• Counter app → number stored in state
• E-commerce cart → cart items stored in state
• Modal popup → open/close state
• Theme switcher → light/dark mode state

How State Works in React (Concept Explained)

State works in a simple cycle:

1. State is created in a component
2. State is used to display data
3. User performs an action (click, type, submit)
4. State gets updated
5. React re-renders the component
6. Updated data appears on the screen

This automatic re-rendering is what makes React powerful.

State in Functional Components (Modern Way)

Today, functional components are the standard in React development. State in functional components is managed using the useState hook.

What Is the useState Hook?

useState is a React Hook that allows functional components to have state.

Syntax of useState Hook

const [stateVariable, setStateVariable] = useState(initialValue);

In the example above stateVariable is the current state value, setStateVariable is the function to update the state and initialValue is the starting value of the state.

Simple Example of useState

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

In the above example count starts at 0. Clicking the button updates the state. React re-renders the component.New count is displayed

Using State for Form Input

We can use State in Forms as well.In below example it is explained how state manages the form inputs

function NameForm() {
  const [name, setName] = useState("");

  return (
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

Here, in the above example state stores the input value and updates it as the user types.

Why We Should NOT Modify State Directly

If we try to increment count directly like this count = count + 1; This is nthe wrong way. This will not update the UI. The correct way is setCount(count + 1); as React only re-renders when the state update function is used.

Updating State Correctly in React

Updating state correctly is very important to avoid bugs.

• State Updates Are Asynchronous : React may batch state updates for performance.
• Use Functional Updates When Needed : Functional updates like setCount(prevCount => prevCount + 1);ensures you always get the latest state value.

Updating Object State

const [user, setUser] = useState({
  name: "Dipti",
  age: 25
});

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

Always copy the previous state before updating.

Updating Array State

const [items, setItems] = useState([]);
setItems([...items, "New Item"]);

Never modify arrays directly.

State vs Props (Important Difference)

State changes internal data. Props changes external data (read-only).

When to Use State and When to Use Props

Use state when data changes inside the component and user interaction affects the data.Use props when passing data from parent to child and sharing static or dynamic data.

Lifting State Up (Brief Idea)

Sometimes, multiple components need the same state.In such cases, state is moved to the common parent component and passed down using props.This concept is called lifting state up.

State in Class Components (Brief Overview)

In older React code, state was managed using class components.

class Counter extends React.Component {
  state = { count: 0 };

  render() {
    return <p>{this.state.count}</p>;
  }
}

Today, this approach is mostly replaced by useState.

Common Mistakes Beginners Make with State

• Modifying state directly
• Forgetting to use setter function
• Using state when props are enough
• Updating object/array incorrectly
• Too many states in one component

Avoiding these mistakes improves code quality.

Best Practices for Using State in React

• Keep state minimal
• Use one state per responsibility
• Lift state when needed
• Avoid unnecessary state
• Use functional updates when required

So, State stores dynamic data. State updates trigger re-render.useState is the modern way to use state.State is mutable, props are not. Update state correctly using setter functions Proper state usage leads to better apps.

State is the backbone of interactive React applications. Once you understand how state works, building real-world projects like forms, dashboards, and e-commerce apps becomes much easier.

If you are serious about learning ReactJS, mastering state management is a must.

Start small, practice daily, and build projects — that’s the best way to become confident with React state.