Props sind Eingaben, die von der Elternkomponente an eine Komponente übergeben werden (aus Sicht des Kindes schreibgeschützt). State sind Daten, die eine Komponente besitzt und intern verwaltet (sie kann sie ändern). Der Unterschied: Props kommen von außen und ändern sich nicht innerhalb der Komponente; State ist intern und änderbar.
function Greeting({ name }) { // `name` is a prop from the parent
return <h1>Hello, {name}</h1>;
// name = "Bob"; // ❌ a child must NOT modify its props
}
// parent supplies the prop
<Greeting name="Ann" />
Props fließen nach unten von der Elternkomponente zum Kind. Das Kind liest sie, kann sie aber nicht ändern — um den Wert eines Props zu ändern, muss die Elternkomponente einen neuen übergeben.
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 wird innerhalb der Komponente erstellt und gesteuert; die Komponente ändert es (über setCount/setState), und eine Änderung löst ein Neuladen aus.
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
}
Der State einer Komponente wird oft als Prop an ein Kind übergeben. Das Hochheben des State und dessen Weitergabe ist genau dieses Muster — die Elternkomponente besitzt den State, Kinder erhalten ihn als Props.
Der Unterschied zwischen State und Props ist grundlegend für komponentenbasierte Frameworks.
Er definiert den Dateneigentum und den Datenfluss: Props sind externe, schreibgeschützte Konfigurationsdaten (Daten nach unten); State ist interne, änderbare Daten, die die Komponente verwaltet.
Sie zu verwechseln — Props zu mutieren oder Props in State zu duplizieren — führt zu klassischen Bugs.
Das Verständnis, dass Daten als Props nach unten fließen, während jede Komponente ihren eigenen State verwaltet, ist das Fundament des Komponentendesigns in React/Vue/Angular.