State vs Props in React: A Complete Beginner to Intermediate Guide

When starting with React, developers often get confused between state and props. Both are used to manage data, but they serve very different purposes. Understanding them properly is essential for building clean and scalable applications.

What are Props?

Props stand for properties. They are used to pass data from one component to another, typically from parent to child.

Props are read-only. This means a child component cannot change the data it receives.

Example:

function User(props) {
  return <h1>{props.name}</h1>;
}

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

Here, the App component passes the name to the User component. The User component simply displays it.

Key characteristics of props:

• Passed from parent to child
• Immutable
• Used for component communication

What is State?

State is used to store and manage data within a component. Unlike props, state can change over time.

Example:

import { useState } from "react";

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

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

Here, count is a state variable. When the button is clicked, the state updates and the UI re-renders.

Key characteristics of state:

• Managed inside the component
• Mutable
• Triggers re-render when updated

State vs Props (Core Differences)

1. Source: Props come from outside the component. State is managed inside the component.
2. Mutability: Props are read-only. State can be changed.
3. Purpose: Props are used for communication. State is used for dynamic data handling.

How They Work Together

In real-world applications, props and state are often used together.

Example: A parent component holds state and passes it as props to child components.

function Parent() {
  const [message, setMessage] = useState("Hello");

  return <Child text={message} />;
}

function Child(props) {
  return <h1>{props.text}</h1>;
}

Here, the Parent manages the state, and the Child receives it as props.

Best Practices

• Use props for passing data
• Use state for managing internal changes
• Keep state as minimal as possible
• Avoid unnecessary re-renders by structuring state properly

Conclusion

Props and state are the foundation of React. Once you understand when to use each, your components become more predictable, reusable, and easier to maintain.

In simple terms: props are inputs to a component, and state is the component's memory.

Mastering this concept is a big step toward becoming a strong React developer.