DEV Community

Ammar Khan
Ammar Khan

Posted on

React State vs Props: The Simple Difference (with Examples)

If you're new to React, state and props can feel confusing. Here's the short version:
State = data a component owns and can change
Props = data a component receives from its parent (read-only)
State example:
function Counter() {
const [count, setCount] = useState(0);
return (
setCount(count + 1)}>
Clicked {count} times

);
}
Props example:
function Greeting({ name }) {
return

Hello, {name}!

;
}

function App() {
return ;
}
Rule of thumb: if the component needs to change the data itself, use state. If the data comes from a parent, it's a prop.
I made a full 10-minute beginner walkthrough with more examples:

What confused you most when learning state vs props? Let me know in the comments.

Top comments (0)