State vs Props
State is a component's own private diary, while props are letters it receives from its parent -- one it controls, the other it just reads.
In this page:
Syntax
function Parent() {
const [state, setState] = useState(initialValue); // owned and changeable
return <Child prop={state} />;
}
function Child({ prop }) { // received, read-only
return <element>{prop}</element>;
}State: Owned and Changeable
State belongs to the component that declares it with useState, and only that component can change it (via its setter function). It represents data that can change over the component's lifetime, like a counter or form input value.
Note:
If a component needs to remember and change a value over time on its own, that's a sign it should be state.
Warning:
A component can only update its OWN state directly -- it cannot reach into a different component and change its state.
Example: State: Owned and Changeable
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Counter() {
const [count, setCount] = React.useState(0); // owned by Counter
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
</script>
</body>
</html>Props: Received and Read-Only
Props are values handed to a component by its parent -- the component receiving them can read but never modify them. If a prop's value needs to change, that change must happen in the parent, which then passes down a new value.
Note:
If a value comes from outside the component (from whoever is using it), it's a prop, not state.
Warning:
Trying to 'update a prop' inside the receiving component is a conceptual mistake -- the receiving component doesn't own it.
Example: Props: Received and Read-Only
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Display({ label }) { // label is a prop, read-only here
return <p>{label}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Display label="I am a prop" />);
</script>
</body>
</html>Deciding Between State and Props
A simple test: if a component needs to track and change a value itself over time, it's state; if a value is handed down from a parent to configure or inform the component, it's a prop. Many real components use both together.
Note:
Ask 'who is responsible for changing this value?' -- if the answer is 'this component itself', it's state.
Warning:
A common design mistake is putting data in state when it should really be derived from props instead, causing them to fall out of sync.
Example: Deciding Between State and Props
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Greeting({ name }) { // prop: comes from parent
const [likes, setLikes] = React.useState(0); // state: owned locally
return (
<div>
<p>Hello, {name}! Likes: {likes}</p>
<button onClick={() => setLikes(likes + 1)}>Like</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting name="Sam" />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Trying to modify a prop inside the component that received it, instead of lifting state up or copying it into local state.
- Confusing which component owns a value -- state belongs to the component that declared it, props belong to whoever receives them.
- Assuming a component's props will change on their own -- they only change when the parent re-renders with new values.
Chapter Summary
- State is data a component manages internally with useState.
- Props are data passed into a component from its parent.
- State is mutable (via its setter); props are read-only from the child's perspective.
- A value's owner -- state or props -- determines who is responsible for updating it.
Browser Support
No browser-specific restrictions -- a conceptual distinction fundamental to all React versions.
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: