React State vs Props: The Beginner-Friendly Breakdown

Understanding the difference between state and props in React is one of the most important concepts for new developers. Even experienced engineers occasionally mix them up when designing component APIs. This breakdown gives you a practical, developer-first explanation with real-world examples.

🔍 What Are Props?

Props (short for properties ) are how data flows into a React component from its parent. They are:

• Read-only (immutable inside the receiving component)
• Controlled by the parent
• Used to configure a component

Think of props like function parameters.

Example: Using Props

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

export default function App() {
  return <Greeting name="React Developer" />;
}

The `App` component passes `name` as a prop. `Greeting` cannot modify it.

🔥 What Is State?

State is data managed within a component. It represents values that can change over time—usually from user interaction or asynchronous updates.

State is:

• Mutable (with React’s `setState` or hooks like `useState`)
• Local to the component unless lifted
• Triggering re-renders when updated

Example: Using State

import { useState } from "react";

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

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

State belongs to the component and updates with user interaction.

🔄 State vs Props

Summary: Props are for external configuration. State is for internal data.

🎯 When to Use Which

Use Props when:

• Passing data to child components
• Making reusable, configurable UI (buttons, inputs, cards)
• Rendering based on parent-owned data

Use State when:

• Managing form inputs
• Handling UI toggles (modals, dropdowns)
• Tracking asynchronous results (API calls)
• Creating interactive components

🧭 A Practical Real-World Example

A parent manages state, while children receive data as props.

function TodoList() {
  const [todos, setTodos] = useState(["Learn React", "Build Projects"]);

  return (
    <div>
      {todos.map((todo, idx) => (
        <TodoItem key={idx} text={todo} />
      ))}
    </div>
  );
}

function TodoItem({ text }) {
  return <p>{text}</p>;
}

The parent manages state, but passes each todo to the child via props.

🚀 Pro Tip for Beginners

If you’re unsure whether something should be state or a prop, ask:

“Does this component need to change this data?”

• Yes → State
• No → Prop

This simple rule works 90% of the time.

✔️ Final Thoughts

React becomes significantly easier once you internalize the differences between state and props. Mastering these concepts improves component design, reduces bugs, and leads to cleaner, more predictable UIs.

If you’re comfortable with this distinction, you’re ready to explore more advanced topics such as lifting state , context , and state management libraries .