Difference Between State and Props in React

When building modern React applications, two of the most essential concepts every developer must understand are State and Props. They might look similar because both are used to handle data in components, but their roles are completely different. State is about data that belongs to a component and can change over time, while Props are about passing data from one component to another. Understand the Difference Between State and Props in React with examples to manage data flow, enhance reusability, and build dynamic components.

What is State? 

State represents data that can change within a component. It is managed inside the component itself and can be updated using React’s built-in useState hook or class-based this.setState() method. Whenever the state changes, the component automatically re-renders to reflect the new data. 

In simple words, a state is the memory of a component — it remembers what has happened and changes when users interact. 

Key Points about the state 

• Mutable: State can be changed within the component. 

• Local Ownership: Each component manages its own state independently. 
• Triggers Re-render: Updating the state automatically refreshes the component’s UI.
• Used for Dynamic Data: Great for handling user input, API responses, counters, toggles,  etc. 

Example 

Imagine you are building a counter app. When you click a button, the number on the screen increases. That number is stored in the component’s state. 

function Counter() { 

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

 return ( 

 <div> 

 <h2>Count: {count}</h2> 

 <button onClick={() => setCount(count + 1)}>Increase</button> 

 </div> 

 );} 

Here, count is the state variable. setCount updates it. When you click the button, the state changes and React re-renders the UI.

What are Props? 

Props (short for “properties”) are used to pass data from one component to another — usually from a parent to a child. Unlike state, props are read-only, meaning the receiving component cannot modify them. 

Props make components reusable and help create a unidirectional data flow in React applications. 

Key Points about Props 

• Immutable: Once passed, props cannot be changed by the child component. 
• Data Transfer: Used to send data, functions, or even components as values. 
• Reusable Components: Props allow creating flexible components that adapt to different inputs. 

• Parent → Child Communication: Data always flows from parent to child. 

Example 

function Greeting(props) { 

 return <h3>Hello, {props.name}!</h3>; 

} 

function App() { 

 return ( 

 <div> 

 <Greeting name="Abhay" /> 

 <Greeting name="Priya" /> 

 </div> 

 ); 

} 

Here: App passes the prop name to Greeting. The same component is reused twice with  different data.

State and Props Together 

In real-world apps, state and props often work together. 

function Child({ count }) { 

 return <p>Current Count: {count}</p>; 

} 

function Parent() { 

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

 return ( 

 <div> 

 <Child count={count} /> 

 <button onClick={() => setCount(count + 1)}>Add</button> 

 </div> 

 ); 

} 

Here: Parent controls state, passes it as props to Child, and any change re-renders automatically.

Real-Life Analogy 

Think of a restaurant: the kitchen keeps track of the order (state), and the waiter delivers the food (props). The waiter can’t change the order — just pass it. That’s how state and props behave. 

In React, State and Props are two pillars that make components interactive and reusable. 

• State answers: “What’s happening inside this component?” 

• Props answer: “What data or actions am I receiving from outside?” 

When used correctly: 

1. State keeps your components dynamic. 

2. Props keep your components connected and reusable. 

Always remember: 

• The state belongs to the component. 

• Props come from the parent. 

Together, they help build powerful, efficient, and modular React apps.

Do visit our channel to learn More: SevenMentor

Author:-

Abhay Gawali