React Props vs State: When to Use Each

If you're just starting with React, you've probably heard a lot about props and state. They both deal with data in your components, but in different ways. Understanding how they work is essential to building dynamic and maintainable React applications.

In this guide, we’ll walk through:

• ✅ What props and state actually are

• ✅ How they differ from each other

• ✅ When to use one over the other

• ✅ Real-world examples to bring the concepts to life

1. What Are Props?

Props (short for “properties”) are how data gets passed from one component to another—typically from a parent to a child.

Key Points:

• Read-only: A child component can’t change the props it receives.

• Component communication: Props are how components share information.

• Similar to function parameters: Think of them like arguments passed into a function.

Example:

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

// Child Component
function User({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

Here, App sends name and age as props to the User component. The User component can display them but cannot modify them.

2. What Is State?

State is data that a component manages internally. It changes over time—usually as a result of user actions or other events.

Key Points:

• Mutable: State can be updated using React’s useState hook.

• Local: It lives inside the component that owns it.

• Dynamic: Changes in state trigger re-renders, updating the UI.

Example:

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

When the button is clicked, the count state updates, and the component re-renders with the new value.

3. Props vs State: Key Differences

4. When to Use Props vs State

✅ Use Props When:

• You want to pass data from parent to child.

• The data doesn’t need to change inside the child component.

Examples:

• Displaying a user profile: <User name="Alice" />

• Customizing a button: <Button color="blue" />

✅ Use State When:

• The data changes over time.

• The component needs to respond to user actions or events.

Examples:

• Managing modal visibility: const [isOpen, setIsOpen] = useState(false)

• Capturing input in a form: const [email, setEmail] = useState('')

5. Common Mistakes and Best Practices

Don’t try to change props

function User({ name }) {
  name = "Bob"; // Don't do this!
  return <p>{name}</p>;
}

Props are read-only. If a component needs to modify data, it should use state instead.

Lift state up if needed

When multiple components need access to the same data, manage the state in their nearest shared parent:

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

  return (
    <>
      <Counter count={count} onIncrement={() => setCount(count + 1)} />
      <Display count={count} />
    </>
  );
}

🤓 Don’t store derived values in state

If a value can be calculated from props or other state, no need to put it in state.

// Bad: Unnecessary state
function User({ firstName, lastName }) {
  const [fullName, setFullName] = useState(`${firstName} ${lastName}`);
  return <p>{fullName}</p>;
}

// Better: Derive directly from props
function User({ firstName, lastName }) {
  const fullName = `${firstName} ${lastName}`;
  return <p>{fullName}</p>;
}

---

6. Quick Reference: Props vs State

Final Thoughts

A simple way to remember:

Props = External data (parent to child)
State = Internal data (changes over time)

If the data stays constant and comes from outside, use props.
If the data is expected to change (e.g., based on user input), go with state.

Want to Learn More?

• React Docs: Components and Props

• React Docs: State and Lifecycle