In React.js:
- Props (short for "properties") are read-only data passed from a parent component to a child component to configure it.
- State is mutable data managed within a component that can change over time and trigger re-renders.
| Props | State |
|---|---|
| Immutable (read-only) | Mutable (can be changed) |
| Passed by parent | Owned by the component itself |
| For component configuration | For managing internal data |
| Read-only in child components | Managed and updated internally |
Example:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>; // props.name is read-only
}
function Counter() {
const [count, setCount] = useState(0); // count is part of state
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}