When developing React applications, understanding state and props is crucial. Both are used to manage and pass data within a React component, but they serve different purposes and have distinct behaviors. This tutorial will break down the key differences between React state and props with examples.

1. What is React State?

Definition

State is a built-in React object that stores component-specific data. It is mutable and can change over time, typically in response to user interactions or data updates.

Characteristics of State:

• Mutable: Can be updated using setState (class components) or useState (functional components).
• Local to the Component: Each component manages its own state.
• Triggers Re-rendering: When state updates, the component re-renders to reflect the new data.
• Used for Dynamic Data: State is ideal for handling data that changes frequently, such as form inputs, user interactions, and API responses.

Example of State in a Functional Component:

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>
  );
}

export default Counter;

Explanation:

• useState(0) initializes the count state with a value of 0.
• setCount(count + 1) updates the state when the button is clicked.
• React re-renders the component whenever the state changes.

2. What are React Props?

Definition

Props (short for “properties”) are read-only data that are passed from a parent component to a child component. They allow components to be reusable and configurable.

Characteristics of Props:

• Immutable: Props cannot be modified inside the receiving component.
• Passed from Parent to Child: Used to pass data and event handlers between components.
• Pure Functionality: Props help make components pure by ensuring they only depend on the received data.

Example of Props in a Component:

import React from 'react';

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

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

export default App;

Explanation:

• The Greeting component receives a prop called name.
• App passes “John” as a prop to Greeting.
• The child component (Greeting) uses the prop but cannot modify it.

3. Key Differences Between State and Props

Feature	State	Props
Definition	Manages local, dynamic data inside a component	Used to pass data from parent to child
Mutability	Mutable (can be updated with setState or useState)	Immutable (cannot be changed inside the child component)
Scope	Local to the component	Passed from parent to child
Updates	Triggers re-render when updated	Does not trigger re-render on its own
Usage	Storing and managing dynamic data (e.g., form inputs, UI toggles)	Sharing information between components
Controlled By	Managed within the component itself	Managed by the parent component

4. When to Use State vs. Props?

Use State When:

• You need a component to manage its own data.
• The data will change over time due to user interaction.
• The component should re-render when the data updates.

Use Props When:

• You want to pass data from a parent component to a child.
• The data should remain unchanged inside the receiving component.
• You need to make components reusable with different configurations.

5. Combining State and Props

In a real-world application, state and props often work together. A parent component manages state and passes it down to child components as props.

Example:

import React, { useState } from 'react';

function Child({ count }) {
  return <h2>Count from Parent: {count}</h2>;
}

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

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

export default Parent;

Explanation:

• Parent manages the count state.
• It passes count as a prop to Child.
• Child displays the value but cannot change it.

6. Conclusion

Understanding the difference between state and props is fundamental in React development:

• State is used for local, dynamic data that changes over time.
• Props are used to pass information between components and remain immutable.
• State can be passed down as props to share dynamic data with child components.

By mastering these concepts, you can build efficient and maintainable React applications.