If you’re learning React, two concepts you’ll come across almost immediately are Props and State.
Both are used to work with data inside React components, and at first, they can seem very similar. However, they serve completely different purposes.
Understanding the difference between props and state is essential for building React applications that are organized, predictable, and easy to maintain.
In simple terms:
Props are data passed to a component, while state is data managed by the component itself.
Let’s break down the difference in a simple and practical way.
What Are Props in React?
Props, short for properties, are used to pass data from one component to another.
Props generally flow from a parent component to a child component. They allow components to become reusable by letting the parent provide different data to the same component.
For example, imagine you have a reusable UserCard component.
Instead of creating a separate component for every user, you can pass information such as:
- Name
- Profile image
- Role
- Location
The component can then display whatever information it receives through props.
A Simple Example
<UserCard name="John" role="Developer" />
Here, name and role are props.
The UserCard component doesn’t decide these values itself. The parent component provides them.
This makes props particularly useful for sharing information between components.
Key Characteristics of Props
Props have a few important characteristics:
1. Props Are Read-Only
A component should not directly modify the props it receives.
If a component receives:
name = "John"
It shouldn’t change that prop to "Alex" itself.
Instead, the parent component should provide the updated value.
This principle helps React applications remain predictable.
2. Props Come From Outside
Props are provided by another component, usually a parent.
Think of props as input given to a component.
3. Props Make Components Reusable
Props allow the same component to work with different data.
For example, one ProductCard component can display:
- Laptop
- Smartphone
- Headphones
- Keyboard
The component stays the same while the props change.
What Is State in React?
State is data that a component manages internally.
Unlike props, state can change over time.
State is commonly used when something in the user interface needs to remember or update information.
Examples include:
- Whether a menu is open
- Current counter value
- Selected tab
- Form input values
- Shopping cart items
- Loading status
- Whether a user is logged in
When state changes, React can re-render the component and update the UI.
A Simple Example of State
Imagine a button that displays:
Likes: 10
When the user clicks the button, it becomes:
Likes: 11
The number of likes is a good example of state.
The component needs to remember the current value and update it when the user interacts with the button.
In modern React, state is commonly managed using the useState Hook.
const [likes, setLikes] = useState(10);
You don’t need to memorize the syntax immediately. The important concept is:
State represents information that can change while the component is running.
Props vs State: The Main Difference
The easiest way to understand the difference is to think about where the data comes from and who controls it.
| Props | State |
|---|---|
| Passed to a component | Managed by a component |
| Usually comes from a parent | Belongs to the component |
| Read-only | Can be updated |
| Used to communicate between components | Used to manage changing data |
| Helps make components reusable | Helps make components interactive |
| Changes when the parent provides new values | Changes through state updates |
A useful mental model is:
Props = Input
State = Memory
A component receives props from the outside and uses state to remember information that may change.
Props Are About Communication
One of the biggest purposes of props is communication between components.
Consider a page containing a product list.
The parent component might have information about multiple products, while the ProductCard component only needs to display one product.
The parent can pass the product information as props.
This creates a clear relationship:
Parent → Props → Child
For example:
ProductList
↓
Product
↓
ProductCard
Each component can focus on its own responsibility.
This approach is one of the reasons React applications can be broken into small, reusable components.
State Is About Change
State becomes important when the application needs to respond to user actions or changing data.
Consider a navigation menu on a mobile website.
Initially:
Menu → Closed
The user clicks the menu button.
Now:
Menu → Open
The component needs to remember whether the menu is currently open.
That’s where state comes in.
State allows React components to respond to events and update the interface accordingly.
Can Props Change?
Yes, but there is an important distinction.
A component should not change its own props.
However, the value of a prop can change when the parent component re-renders and passes a different value.
For example:
Parent
↓
name = "John"
↓
Child
Later, the parent changes the value:
Parent
↓
name = "Alex"
↓
Child
The child receives the new prop.
So props are immutable from the child’s perspective, but the parent can provide new values over time.
Can State Change?
Yes.
Changing state is one of the primary reasons to use state.
For example, an e-commerce application might have:
Cart Items: 2
After the user adds another product:
Cart Items: 3
The state changes, and React updates the relevant part of the interface.
This creates the interactive behavior users expect from modern applications.
Props and State Work Together
Props and state aren’t competing concepts.
In real React applications, they often work together.
Imagine a shopping application.
A parent component might maintain the selected product using state:
Selected Product → Laptop
It can then pass that information to a child component through props:
Parent State
↓
Props
↓
Product Details
The parent manages the changing information, while the child receives the information it needs.
This separation makes applications easier to reason about.
A Real-World Example
Consider a login form.
The form might need to manage:
- Email entered by the user
- Password entered by the user
- Loading status
- Error messages
- Whether the form has been submitted
These are examples of state because they can change based on user interaction.
Now imagine the same form is displayed inside a reusable authentication component.
The parent might pass:
- Page title
- Button text
- Login mode
- Callback function
These are examples of props.
So you might have:
State
“What is happening inside this component right now?”
Props
“What information or behavior is being provided to this component?”
Props vs State: How to Decide Which One to Use?
When building a component, ask yourself a simple question:
Does this data come from another component?
If yes, it is likely a prop.
Does this component need to remember or change the data?
If yes, it is likely state.
For example:
| Requirement | Usually Use |
|---|---|
| Display a user’s name | Props |
| Track whether a modal is open | State |
| Pass a product to a card | Props |
| Track selected tab | State |
| Pass a theme setting | Props |
| Track form input | State |
| Pass button text | Props |
| Track loading status | State |
Common Mistakes Beginners Make
Understanding props and state also means understanding what not to do.
1. Trying to Modify Props
A child component should not directly modify the props it receives.
Instead, if the child needs to request a change, the parent can provide a function through props.
This keeps data flow predictable.
2. Using State for Everything
Not every piece of data needs to be state.
If a value doesn’t change or doesn’t need to trigger a UI update, storing it in state may add unnecessary complexity.
A good React component keeps its state minimal.
3. Creating Duplicate State
Sometimes developers store information in state even though it can already be calculated from existing props or state.
This can lead to synchronization problems.
A useful principle is:
Keep the source of truth in one place whenever possible.
4. Forgetting the Data Flow
React generally follows a predictable data flow:
Parent → Child
This is often called one-way data flow.
Keeping this pattern clear makes debugging and maintaining React applications much easier.
Why Understanding Props and State Matters
Props and state are more than just React terminology.
They form the foundation of how React applications manage information and update the user interface.
Once you understand them, concepts such as:
- Component composition
- Event handling
- Forms
- Context
- Hooks
- State management libraries
- Reusable components
become much easier to understand.
Many advanced React patterns are essentially built around controlling how data moves through components.
Props vs State: A Simple Mental Model
If you’re still confused, remember this:
Props
“Someone is giving this component information.”
State
“This component needs to remember something that can change.”
For example:
A UserCard receives a user’s name → Prop
A UserCard tracks whether the profile menu is open → State
That’s the core difference.
Final Thoughts
Understanding Props vs State is one of the most important steps when learning React.
Props allow components to receive information and communicate with other components, while state allows components to manage changing information and respond to user interactions.
The easiest way to remember the difference is:
Props come from outside. State is managed inside.
Once this distinction becomes clear, React’s component-based architecture starts to make much more sense.
Whether you’re building a simple portfolio website or a large-scale application, knowing when to use props and when to use state will help you create cleaner, more reusable, and maintainable React components.
