Startseite / Artikel / Die Reaktionsgeschwindigkeit beginnt mit der Organisation des Komponentenbaums.

react performance architecture state frontend rendering

Die Reaktionsgeschwindigkeit beginnt mit der Organisation des Komponentenbaums.

Re-Rendern ist nicht das Problem – die weitreichende Zustandsverbreitung schon. Verschieben Sie die Quellen nach unten, bevor Sie mikro-speichern.

1699 Wörter

React tut das, was das Baumdesign vorschreibt. Wenn eine Anwendung langsam wirkt, folgt das Framework oft einem umfangreichen Pfad für den Zustands-/Aktualisierungsverbreitungsvorgang – es versagt nicht auf unerklärliche Weise.

Erneutes Rendern ist nicht der Feind

Das Rendern sorgt dafür, dass die Benutzeroberfläche konsistent bleibt. Der Feind sind unnötige Arbeiten in großen Unterbäumen bei jeder Tastenbetätigung.

// ❌ count lives in Parent — expensive siblings re-render on every click
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ExpensiveComponent />
      <AnotherExpensiveComponent />
    </div>
  );
}

// ✅ count lives in Counter — expensive siblings are untouched
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

function Parent() {
  return (
    <div>
      <Counter />
      <ExpensiveComponent />
      <AnotherExpensiveComponent />
    </div>
  );
}

// ❌ SearchLayout owns state — ExpensiveList re-renders on every keystroke
function SearchLayout() {
  const [query, setQuery] = useState('');

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <ExpensiveList />
    </div>
  );
}

/* ✅ StatefulInput receives expensive content as children
 — its reference stays stable */
function StatefulInput({ children }) {
  const [query, setQuery] = useState('');
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      {children}
    </div>
  );
}

function SearchLayout() {
  return (
    <StatefulInput>
      <ExpensiveList />
    </StatefulInput>
  );
}

Wo die Verbreitung aufhören sollte

Die Quelle verschieben

Platzieren Sie den Zustand neben den Komponenten, die ihn schreiben und lesen. Der Entwurftext eines Formulars muss nicht am Wurzelort der Anwendung liegen.

Den Pfad blockieren

Kinderkomponenten, die stabile Props entgegennehmen, können aussteigen. Komposition sowie die Verwendung von Kindern als Slots sind oft effektiver als pauschales Memoisieren.

Der Baum als Gestaltungsentscheidung

Die Organisation ist eine Architekturentscheidung: Funktionen in Ordnern unterteilen, Container von Präsentationskomponenten trennen sowie lokale Provider nutzen, um den Einflussbereich von Updates einzuschränken.

Aus dem Baum heraus starten

Bevor man zu Mikro-Optimierungen greift, sollte man skizzieren, welcher Zustand wo gehören soll und welche Unterbäume bei häufigen Updates unverändert bleiben müssen. Die meisten Beschwerden über „langsame React-Anwendungen“ betreffen genau solche Baumstrukturen.

Erst profilieren, dann neu organisieren; Memoisierung zuletzt anwenden.

Context-Provider sind Teil des Baums: Ein Mega-Context, der bei jeder Renderung geändert wird, macht die Memoisierung der Blattknoten zunichte. Trennen Sie Contexts nach Häufigkeit der Updates.

Codeteilung auf Route-Ebene verkleinert den Baum, für dessen Darstellung man beim ersten Mal bezahlt; kombinieren Sie dies mit lokalem State, um die Navigation zu beschleunigen.

List-Virtualisierung ist wie eine Baumsanierung – unbenutzte Zeilen außerhalb des Bildschirms deaktivieren, anstatt Tausende inaktiver Knoten abzugleichen.

Dokumenteneigentum: Welches Team ist für den Zustand welcher Unterbaumstruktur verantwortlich. Gemeinsam genutzte globale Speicher erzeugen das Problem der weiten Ausbreitung nur unter einem anderen Namen.

Nutzen Sie die Commit-Zeitangaben des React Profilers vor und nach einer Zustandsänderung; legen Sie den Unterschied in der PR zur Überprüfung ab.