🔍 What is State in React?

In React, state is a built-in object that stores data describing a component’s current condition. This data can change over time—usually in response to user interactions, network responses, or system events. When state updates, React re-renders the component so the UI always reflects the latest data.
Unlike props (which come from a parent), state is owned and managed by the component itself. Think of state as the component’s private memory.

⚙️ State in Functional Components (using useState)

With React 16.8+, functional components can manage state using the useState hook.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </>
  );
}

Here’s what’s happening:

useState(0) initializes state with 0.
count holds the current value.
setCount updates the state.
Calling setCount triggers a re-render with the new value.

🏛️ State in Class Components

Before hooks, state was handled only in class components using this.state and this.setState().

import React, { Component } from 'react';

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

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

  render() {
    return (
      <>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click Me</button>
      </>
    );
  }
}

Key points:

State is initialized in the constructor.
this.setState() updates state and re-renders the component.
The UI always reflects the current state.

📊 Core Characteristics of State

Local Scope: State belongs to the component where it’s defined.
Reactive: Updating state triggers a UI update.
Flexible: State can store numbers, strings, objects, arrays, or booleans.

⚖️ State vs Props

Aspect	State	Props
Ownership	Managed within the component	Passed from parent
Mutability	Mutable via setters	Read-only
Purpose	Track internal changes	Configure/parameterize components

📌 When Should You Use State?

Managing form inputs and validations
Toggling UI elements like modals or dropdowns
Storing API responses and loading flags
Handling counters, timers, or switches

💡 Tips for Working with State

Never mutate state directly—always use the setter.
Keep state minimal; store only what’s needed for the UI.
Prefer derived values (computed from state/props) over duplicating data.
Group related state thoughtfully without overcomplicating.

🧠 Final Thoughts

State is fundamental to building dynamic, interactive React UIs. Whether you’re using functional components with hooks or maintaining legacy class components, mastering state management is essential. As applications grow, local state is often combined with Context API or external libraries for global needs—but understanding state is always the first step.

What is State in React? Beginner to Advanced Guide