Props and State are two important concepts in React.
They are used to manage and pass data inside React applications.
What Are Props?
Props stands for:
[code theme="dark"]
Properties
[/code]
Props are used to pass data from:
[code theme="dark"]
Parent Component
→
Child Component
[/code]
Props are read-only.
Child components cannot directly modify props.
Props Example
[code theme="dark"]
function Child(props){
return(
Hello {props.name}
);
}
function App(){
return(
);
}
[/code]
Here:
-
name is a prop
-
Parent passes data to Child
-
Child receives data using props
[grid]
Parent to Child Data
Reusable React Components
Dynamic Props Data
React Component Communication
[/grid]
What Is State?
State is used to store dynamic data inside a component.
State can change over time.
When state updates:
[code theme="dark"]
Component Re-renders
[/code]
State Example
[code theme="dark"]
import { useState } from "react";
function App(){
const [count,setCount] =
useState(0);
return(
{count}
);
}
[/code]
Here:
-
count → current state value
-
setCount → updates state
-
Updating state re-renders component
[grid]
Dynamic React State
Counter Application
Interactive UI Updates
React State Management
[/grid]
How Props and State Work Together
Parent components often store data in state.
Then pass that data to child components using props.
Example
[code theme="dark"]
function Child({count}){
return(
Count: {count}
);
}
function App(){
const [count,setCount] =
useState(0);
return(
);
}
[/code]
Here:
-
App stores count in state
-
App passes count to Child using props
-
Child displays the value
Difference Between Props and State
|
Feature
|
Props
|
State
|
|
Data Source
|
Parent Component
|
Inside Component
|
|
Mutable
|
No
|
Yes
|
|
Re-render Component
|
Yes
|
Yes
|
|
Used For
|
Passing Data
|
Managing Dynamic Data
|
Simple Understanding
[code theme="dark"]
Props
Data passed
from parent to child
State
Data managed
inside component
[/code]
Common Props Use Cases
-
Passing user data
-
Reusable UI components
-
Component communication
-
Dynamic content rendering
Common State Use Cases
-
Form handling
-
Counters
-
Toggle UI
-
API data
-
Dynamic UI updates
[grid]
Reusable Component Props
Dynamic State Updates
Interactive React UI
Modern React Data Flow
[/grid]
Important Notes
-
Props are read-only
-
State updates trigger re-rendering
-
Props help component communication
-
State manages dynamic UI behavior
Final Understanding
[code theme="dark"]
Props
→ Pass data
State
→ Manage data
[/code]