State vs Props
In this page:
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>- 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.
- 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.
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: