Understanding React State vs. Props

In React, both state and props are essential concepts for managing data within components and passing data between components. Understanding the differences between state and props is crucial for building React applications efficiently. Let's delve into the details of state and props in React:


link to this section

What is State?

  • Definition: State represents the data specific to a component that can change over time.
  • Usage: Used to manage and track changes to data within a component.
  • Mutable: State can be modified using the setState() method provided by React.

When to Use State?

  • Component-Specific Data: Use state for data that is internal to a component and doesn't need to be shared with other components.
  • Dynamic Data: Use state for data that changes based on user interactions, server responses, or other factors.


import React, { Component } from 'react'; 
class Counter extends Component { 
    constructor(props) { 
        this.state = { count: 0 }; 
    incrementCount = () => { 
        this.setState({ count: this.state.count + 1 }); 
    render() { 
        return ( 
                <p>Count: {this.state.count}</p> 
                <button onClick={this.incrementCount}>Increment</button> 

export default Counter; 


link to this section

What are Props?

  • Definition: Props (short for properties) are inputs to a component that are passed from its parent component.
  • Usage: Used to pass data from parent components to child components.
  • Immutable: Props are immutable and cannot be changed within the component.

When to Use Props?

  • Parent-to-Child Communication: Use props to pass data from parent components to child components.
  • Configuration: Use props to configure child components with values or behaviors defined by parent components.


import React from 'react'; 
const Greeting = (props) => { 
    return <h1>Hello, {props.name}!</h1>; 

export default Greeting; 


import React from 'react'; 
import Greeting from './Greeting'; 

const App = () => { 
    return <Greeting name="John" />; 

export default App; 

Key Differences

link to this section
  1. Source of Data:

    • State: Owned and managed internally by the component.
    • Props: Received from parent components.
  2. Mutability:

    • State: Mutable and can be changed using setState() .
    • Props: Immutable and cannot be changed within the component.
  3. Usage:

    • State: Used for managing component-specific data and dynamic changes.
    • Props: Used for passing data between components and configuring child components.


link to this section

Understanding the distinction between state and props is fundamental to building React applications effectively. While state manages internal component data and dynamic changes, props facilitate communication between components by passing data from parent to child. By leveraging state and props appropriately, you can create React components that are both flexible and reusable, enabling you to build scalable and maintainable applications.