State und Props in React verstehen

Wenn du mit React startest, begegnen dir zwei Begriffe immer wieder: State und Props. Beide bestimmen, was deine Komponente anzeigt, aber sie funktionieren grundlegend unterschiedlich. In diesem Beitrag zeige ich dir, was der Unterschied ist, wann du was brauchst und wie der Datenfluss in React funktioniert.

Was sind Props?

Props (kurz für "properties") sind Daten, die eine Elternkomponente an ihre Kindkomponente weitergibt. Du kannst dir das wie Funktionsargumente vorstellen. Eine Komponente empfängt Props und darf sie nicht verändern – sie sind read-only.

function Begruessung(props) {
  return <h1>Hallo, {props.name}!</h1>;
}

function App() {
  return <Begruessung name="Anton" />;
}

Hier reicht App den Wert name="Anton" an Begruessung weiter. Mit Destrukturierung wird der Code oft noch lesbarer:

function Begruessung({ name }) {
  return <h1>Hallo, {name}!</h1>;
}

Was ist State?

State ist der interne Zustand einer Komponente. Anders als Props gehört State der Komponente selbst und darf sich über die Zeit ändern. Wenn sich der State ändert, rendert React die Komponente automatisch neu. Mit dem useState-Hook legst du State an:

import { useState } from "react";

function Zaehler() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Geklickt: {count} mal
    </button>
  );
}

Jeder Klick erhöht count, React aktualisiert die Anzeige automatisch. Diesen direkten Zusammenhang zwischen State-Änderung und Neu-Rendering nennt man Reaktivität – daher der Name React.

Der entscheidende Unterschied

Die wichtigste Faustregel lautet: Props kommen von außen, State entsteht innen.

• Props: werden von der Elternkomponente gesetzt, sind unveränderlich, fließen von oben nach unten.
• State: wird in der Komponente verwaltet, ist veränderbar, löst beim Ändern ein Re-Rendering aus.

Eine Komponente kann beides gleichzeitig nutzen: Props empfangen und eigenen State halten.

Daten fließen von oben nach unten

In React fließen Daten in eine Richtung – von der Eltern- zur Kindkomponente. Das nennt man unidirektionalen Datenfluss. Möchte ein Kind etwas an die Eltern zurückmelden, übergibt die Elternkomponente eine Funktion als Prop:

function Eltern() {
  const [nachricht, setNachricht] = useState("");

  return (
    <div>
      <p>Vom Kind: {nachricht}</p>
      <Kind onSenden={setNachricht} />
    </div>
  );
}

function Kind({ onSenden }) {
  return (
    <button onClick={() => onSenden("Hallo Eltern!")}>
      Nachricht senden
    </button>
  );
}

Das Kind ruft die übergebene Funktion auf, und die Elternkomponente aktualisiert ihren eigenen State. So bleibt der Datenfluss klar nachvollziehbar.

Häufige Stolperfallen

Ein typischer Fehler ist der Versuch, Props direkt zu verändern:

function Falsch({ name }) {
  name = "Neuer Name"; // verboten! Props sind read-only
  return <p>{name}</p>;
}

Wenn sich ein Wert ändern soll, gehört er in den State. Ein weiterer Klassiker: State niemals direkt mutieren, sondern immer die Setter-Funktion nutzen. Schreibe also nie count = count + 1, sondern immer setCount(count + 1).

Fazit

Props und State sind die beiden Säulen, auf denen React steht. Props sind die unveränderlichen Daten, die von außen hereinkommen, State ist der veränderbare Zustand, den eine Komponente selbst verwaltet. Wenn du verinnerlichst, dass Daten von oben nach unten fließen und State nur über Setter-Funktionen geändert wird, hast du das Wichtigste verstanden. Im nächsten Schritt schauen wir uns den useState-Hook noch genauer an – dann wird dir der Umgang mit Zustand richtig vertraut.