Props är indata som skickas in till en komponent från dess förälder (skrivskyddad från barnets perspektiv). State är data som en komponent äger och hanterar internt (den kan ändra det). Skillnaden: props kommer från utsidan och ändras inte inom komponenten; state är internt och mutativ.
() {
;
}
< name= />
Props flödar ner från förälder till barn. Barnet läser dem men kan inte ändra dem — för att ändra ett props värde måste föräldern skicka ett nytt.
function Counter() {
const [count, setCount] = useState(0); // `count` is this component's own state
return <button onClick={() => setCount(count + 1)}>{count}</button>;
// the component updates its OWN state via setCount
}
State skapas och kontrolleras inuti komponenten; komponenten ändrar det (via setCount/setState), och ändring av det utlöser en ny rendering.
Props State
Source passed from parent created in the component
Mutable? read-only (in child) yes (via setter)
Who controls it the parent the component itself
Triggers render when the parent changes it when the component updates it
Purpose configure/pass data in track changing internal data
function Parent() {
const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent
return <Child name={user.name} />; // passed DOWN as a PROP
}
En komponents state skickas ofta till ett barn som ett prop. Att lyfta state upp och skicka det ner är exakt detta mönster — föräldern äger state, barn får det som props.
Skilnaden mellan state och props är fundamental för komponentbaserade ramverk.
Det definierar dataägande och flöde: props är extern, skrivskyddad konfiguration (data ner); state är internt, mutativ data som komponenten hanterar.
Att blanda ihop dem — mutiera props, eller duplicera props in i state — orsakar klassiska buggar.
Att förstå att data flödar ner som props medan varje komponent äger sitt eget state är grunden för React/Vue/Angular komponentdesign.