React is one of the most popular JavaScript libraries for building web applications. If you are learning frontend development or preparing for placements, chances are you have already heard about React. When I started learning React during my B.Tech, two concepts confused me the most: State and Props.
Many students face this problem. At first both words sound technical and similar. But once you understand them with simple examples, everything becomes clear.
In this blog, I will explain React State and Props in very simple language. Think of it like a discussion between college friends preparing for a project or exam. I will also share small examples from student life so it becomes easy to understand.
Introduction
When we build applications using React, we divide the UI into components. You can think of a component like a small piece of the website.
For example in a college portal website:
- Navbar is one component
- Student profile card is another component
- Assignment list is another component
Now the question is: how do these components manage data?
That is where State and Props come into the picture.
In simple words:
- State → Data managed inside a component
- Props → Data passed from one component to another
When I learned this during my React practice, I realized React is basically about managing data and showing it on UI.
Let us understand both step by step.
State in React
What is State?
In simple words, State is data that belongs to a component and can change over time.
State is used when the UI needs to update dynamically.
For example:
Imagine you are building a college attendance tracker.
You may have a variable like:
- Total Classes
- Attended Classes
If the student attends another class, the number should increase automatically on the screen. This is exactly where state is used.
Basically, state helps React update the UI when data changes.
Example of State
Let us see a simple example.
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Class Attended: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Attend Class
</button>
</div>
);
}
export default Counter;
What is happening here?
- useState(0) creates state
- count stores the value
- setCount() updates the value
Whenever the button is clicked, the value increases and React re-renders the UI.
When I first tried this example during my React practice it felt like magic. One click and the UI updates instantly.
Key Points About State
Some important things students should remember:
- State is managed inside the component
- State can change
- When state changes, React re renders the component
- State is mostly used with forms, counters, toggles and dynamic UI
Real Life Example
Think of state like your exam preparation progress.
Suppose you have:
- Chapters completed
- Practice problems solved
- Mock tests attempted
These numbers keep changing daily.
Similarly state stores changing information in React components.
Props in React
Now let us talk about Props which many students confuse with state.
What are Props?
Props stands for Properties.
In simple words:
Props are used to pass data from one component to another component.
Usually, data flows from Parent Component → Child Component.
Example of Props
Let us take a simple example.
Parent Component
import React from "react";
import Student from "./Student";
function App() {
return (
<div>
<Student name="Ankit" branch="CSE" />
<Student name="Rahul" branch="IT" />
</div>
);
}
export default App;
Child Component
function Student(props) {
return (
<div>
<h2>Name: {props.name}</h2>
<p>Branch: {props.branch}</p>
</div>
);
}
export default Student;
Output
Name: Ankit – Branch: CSE
Name: Rahul – Branch: IT
Here the App component sends data to Student component using props.
Key Points About Props
Important points to remember:
- Props are read only
- Props are passed from parent to child
- Props help reuse components
- Props cannot be modified by the child component
Real Life Example
Think about props like assignment instructions given by a professor.
The professor gives:
- Assignment topic
- Submission deadline
- Marks distribution
Students receive these instructions but cannot change them.
Same thing happens with props.
Difference Between State and Props
Many students ask this in exams and interviews. So here is a simple comparison.
| Feature | State | Props |
|---|---|---|
| Definition | Data managed inside component | Data passed from parent component |
| Mutable | Yes | No |
| Controlled by | Component itself | Parent component |
| Purpose | Manage dynamic data | Share data between components |
| Example | Counter value | Student name |
In simple words:
- State = internal data
- Props = external data
Passing Data Between Components
In React applications, components often need to communicate with each other.
There are mainly two common ways.
Parent to Child (Using Props)
This is the most common method.
Example:
<Profile name="Ankit" year="Final Year" />
Here the parent component sends name and year to the child component.
This method is used in almost every React project.
Child to Parent (Using Functions)
Sometimes the child component needs to send data back to the parent.
In this case we pass a function as props.
Example:
Parent component:
function App() {
const receiveData = (data) => {
console.log(data);
};
return <Child sendData={receiveData} />;
}
Child component:
function Child(props) {
return (
<button onClick={() => props.sendData("Hello Parent")}>
Send Data
</button>
);
}
Here the child sends data back to the parent using a function.
When I first learned this it looked confusing. But after practicing 2 to 3 examples it became easy.
Use Cases of State and Props
Now let us see where we actually use them in real projects.
When we build React projects during college or internships, these concepts appear everywhere.
Use Cases of State
State is used when data changes frequently.
Common examples:
- Form inputs
- Login status
- Toggle buttons
- Counters
- Shopping cart items
Example from student life:
Imagine building a quiz app for exam practice.
State can store:
- Current question number
- Selected answer
- Score
As the student answers questions, the state updates.
Use Cases of Props
Props are used when components need data from another component.
Examples:
- Displaying user details
- Passing product data
- Showing blog posts
- Passing API data
Example:
Suppose you build a college notice board website.
Parent component fetches notices from API and sends them to child components using props.
Real Project Example
Let me share something from my own learning.
During my practice project a small student dashboard I used:
State for:
- Logged in user
- Notifications count
- Dark mode toggle
Props for:
- Passing student data to profile component
- Passing marks to result component
- Passing assignment list
That project really helped me understand the difference clearly.
Common Mistakes Students Make
When beginners learn React, some mistakes are very common.
Changing Props Directly
Props should never be modified.
Wrong:
props.name = "Rahul";
Props are read only.
Using State Everywhere
Sometimes students use state even when props are enough.
State should be used only when data needs to change.
Confusing State and Props
A simple rule helps:
- If data changes → use State
- If data comes from parent → use Props
FAQs
What is the main difference between State and Props in React?
State is managed inside the component and can change over time. Props are passed from parent components and cannot be modified by child components.
Can props be changed inside a component?
No. Props are read only. Only the parent component can change the values.
When should we use state in React?
State should be used when data changes dynamically, such as counters, form inputs and user interactions.
Can state be passed to another component?
Yes. State can be passed as props to child components.
Example:
<Profile name={username} />
Here username is state.
Is state faster than props?
Both are part of React's rendering system. Performance mainly depends on how components are designed and updated.
Conclusion
React becomes much easier for you once you understand State and Props properly.
In simple way:
- State manages changing data inside a component
- Props pass data between components
When I started learning React. These concepts looked confusing. But after building small projects and practicing examples everything started making sense.
If you are a beginner or a B.Tech student learning React my suggestion is simple:
- Build small components
- Practice state updates
- Pass data using props
- Try mini projects like todo app, counter app, quiz app
React is mostly about managing data and displaying it properly.
Once you master State and Props you will feel much more confident while building real world applications.
And honestly this is one of the most important concepts for React interviews and frontend developer roles.
So practice it well. It will definitely help in your projects, internships and placements.
Read Also : React Components Explained for Beginners 2026
