React Essentials: State vs Props

What is the Difference Between State and Props in React?

State is a local, mutable data store managed within a component. It represents values that change over time.
Props (short for "properties") are read-only values passed from parent to child components. They allow components to be dynamic and reusable.

Use state for data that can change, and props for input data that is passed into a component.

🔍 What is State?

State in React allows components to create and manage their own local data. This data is internal to the component and can be changed using built-in methods such as setState (in class components) or the useState hook (in functional components).

React uses the state to determine what should be rendered on the screen. If the state changes, React re-renders the component to reflect the updated data.

✅ Key Characteristics of State:

Local Scope: State belongs to the component that defines it.
Mutable: State can be updated using proper methods.
Triggers Re-render: Changes in state cause the component to re-render.
Used for UI Interactivity: Ideal for handling form inputs, counters, toggles, modals, etc.

📦 State Example in a Class Component

jsx

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}>Increment</button>
      </div>
    );
  }
}

Here, count is a piece of state. It’s initialized as 0 and increases when the button is clicked.

⚛️ State Example in a Functional Component

jsx
import React, { useState } from 'react';

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

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

Functional components use the useState hook to handle state. count holds the current value, and setCount updates it.

📨 What are Props?

Props, short for properties, are a way of passing data from a parent component to a child component. They are read-only, meaning the child component that receives them cannot modify them.

Props make React components reusable and modular, allowing the same component to be rendered differently depending on the data it receives.

✅ Key Characteristics of Props:

Read-Only: Child components should never modify props.
Passed from Parent: Data flows in one direction (top-down).
Reusable Components: Customize components with different data.
Support for Functions: You can also pass functions as props for handling events or callbacks.

📦 Props Example in a Class Component

jsx

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

class App extends React.Component {
  render() {
    return <Greeting name="Alice" />;
  }
}

Here, the Greeting component receives a name prop and uses it to display a personalized message.

⚛️ Props Example in a Functional Component

jsx

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="Bob" />;
}

You can also destructure props for cleaner syntax:

jsx

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

🔄 Comparison: State vs Props

Feature	State	Props
Mutability	Mutable	Immutable
Defined In	Inside the component	Passed to the component
Purpose	Manage internal, dynamic data	Configure and customize component
Data Flow	Internal to the component	Top-down from parent
Update Method	`setState` or `useState`	Cannot be updated by child
Trigger Re-render	Yes	Only when parent passes new props

🎯 When to Use State vs Props?

Scenario	Use State or Props?
Counter that increases on click	State
Displaying a user’s name passed from parent	Props
Toggle between light and dark mode	State
Passing a callback function to child	Props
Form data that needs to be submitted	State
Reusing a component with different labels	Props

💬 Real-world Analogy

Think of props like function parameters — they’re inputs to a component, similar to how a function receives arguments.

State, on the other hand, is like variables defined inside a function — they are local and can change during the function’s lifecycle.

yourinfolabs