React Fundamentals: State and setState

Introduction

In React, applications become powerful and interactive because of State. While props help pass data between components, state is used to manage data inside a component.

Understanding state and setState is critical for every React developer and is a very common interview topic.

In this article, you’ll learn:

• What state is
• How state works
• setState usage
• Functional vs Class state handling
• Common mistakes and best practices

What is State in React?

State is a built-in object that stores dynamic data for a component.

State represents data that can change over time, such as:

• Counter values
• Form input data
• Login status
• API response data

Unlike props, state is mutable and controlled by the component itself.

State in Functional Components (useState Hook)

In modern React, functional components use Hooks to manage state.

Example: useState

import { useState } from "react";

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

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

Explanation

• count → current state value
• setCount → function to update state
• useState(0) → initial value

State in Class Components

In class components, state is managed using this.state and this.setState().

Example: Class Component State

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

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

What is setState?

setState() is a method used to update state in class components.

Important points:

• State should never be updated directly
• setState() triggers a re-render
• State updates may be asynchronous

❌ Incorrect:

this.state.count = 1;

✅ Correct:

this.setState({ count: 1 });

setState with Previous State

When updating state based on the previous value, always use a function.

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

This avoids unexpected bugs.

State vs Props (Quick Comparison)

Common State Mistakes Beginners Make

• Directly modifying state
• Forgetting to use setState / setter function
• Updating state inside render
• Confusing props with state

When Should You Use State?

Use state when:

• Data changes over time
• UI should update based on user actions
• Handling forms, toggles, counters
• Storing API responses

State & setState – Interview Quick Answer

What is state in React?

State is a built-in object used to store and manage dynamic data inside a component that can change over time and trigger UI updates.

What is setState?

setState is a method used in class components to update state and re-render the component.

Why do we use state instead of variables? A: Because React state triggers re-rendering when data changes.

Can we have multiple states in one component? A: Yes, using multiple useState hooks.

Best Practices for Using State

• Keep state minimal
• Lift state up when required
• Do not mutate state directly
• Use functional updates when needed