ReactJS State

State is one of the most important concepts in React. Whether you're building forms, interactive dashboards, counters, or dynamic user experiences, state is what allows your UI to update and react to user input.

In this lesson, we will explore what state is, how it works, where it should be used, and common scenarios with examples to help you master state in React class components.

What Is State in React?

State is a built-in React object that stores dynamic data for a component.
It represents values that can change over time — such as input text, counters, API responses, toggle values, or anything that affects the UI.

Whenever state changes, React automatically re-renders the component to show the updated data.

How State Works in Class Components

Without state, your React component would remain static and unable to respond to changes.
It must be initialized inside the constructor and updated using setState().

Setting Initial State (Inside Constructor)


constructor(props) {
  super(props);
  this.state = {
    count: 0,
    message: "Welcome!"
  };
}

Updating State Using setState()


this.setState({
  count: this.state.count + 1
});

React will then re-render the component with the updated value.

Counter Application Using State


class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <div>
        <h2>Count: {this.state.count}</h2>
        <button onClick={this.increment}>Add +1</button>
      </div>
    );
  }
}

export default Counter;

What this application shows:

Initializing state
Updating state
UI automatically refreshing

Rules of Using State in Class Components

Rule	Explanation
State must be an object	State is always stored inside this.state = { }.
You cannot modify state directly	Wrong: this.state.count = 5; Correct: this.setState({ count: 5 });
setState() is asynchronous	React batches state updates to improve performance.
Changing state triggers a re-render	Whenever state updates, React automatically updates the UI.
State is local to the component	Only the component that owns the state can modify it.

Common use cases

Let's understand state with few real time scenarios and examples, Managing Input fields using state and Show/Hide Content Using State

1. Managing Input fields using state


class FormExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "" };
  }

  handleChange = (event) => {
    this.setState({
      name: event.target.value
    });
  }

  render() {
    return (
      <div>
        <input 
          type="text"
          value={this.state.name}
          onChange={this.handleChange}
        />
        <p>You typed: {this.state.name}</p>
      </div>
    );
  }
}

export default FormExample;

What this example shows:

State storing user input
Live updating of interface
React-controlled input field

2. Show/Hide Content Using State


class ToggleMessage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { show: true };
  }

  toggleMessage = () => {
    this.setState({
      show: !this.state.show
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleMessage}>
          {this.state.show ? "Hide" : "Show"} Message
        </button>

        {this.state.show && 
          <p>Hello! This is a message.</p>
        }
      </div>
    );
  }
}

export default ToggleMessage;

What this example shows:

Toggling UI elements using state
Conditional rendering based on state value

Summary

State in React Components allows you to store and update dynamic data that directly affects the UI. It is essential for handling interactions, forms, toggles, counters, and any component that changes over time. Knowing how to initialize, update, and manage state is a core skill in React development.

Now that you understand state, you are ready to dive deeper into how React manages a component’s entire lifecycle. In the next Lesson, we will explore React Lifecycle Methods — mounting, updating, unmounting, and how they work with state.