React-Interviewfragen

Was ist das Virtual DOM und wie funktioniert Reconciliation?

Das Virtual DOM ist ein Baum aus Elementen im Speicher, den React mit dem vorherigen Baum vergleicht, um die minimale Menge an echten DOM-Operationen zu berechnen. Reconciliation vergleicht Knoten für Knoten: Ein anderer Elementtyp verwirft den kompletten Teilbaum, und der key-Prop verrät React, welche Kinder sich nur verschoben und nicht geändert haben. Der eigentliche Wert liegt nicht in reiner Geschwindigkeit, sondern darin, dass du den Zielzustand beschreibst und React die nötigen Mutationen selbst ermittelt.

Erkläre die Regeln für Hooks. Warum darf man Hooks nicht innerhalb von Bedingungen aufrufen?

Hooks müssen auf der obersten Ebene einer Komponente oder eines Custom Hooks aufgerufen werden, und zwar bei jedem Render in derselben Reihenfolge. React speichert den Hook-Zustand in einem Array, das nach Aufrufreihenfolge indiziert ist — ein bedingter Hook verschiebt also alle nachfolgenden Indizes, und eine Komponente liest plötzlich den Zustand eines anderen Hooks. Genau deshalb gibt es die Linter-Regel: Der Fehler ist still und extrem verwirrend.

Was ist der Unterschied zwischen useMemo, useCallback und React.memo?

useMemo cached einen berechneten Wert, useCallback cached die Identität einer Funktion, und React.memo überspringt das Re-Rendering einer Komponente, wenn ihre Props flach gleich sind. Alle drei greifen ineinander: Ein Callback zu memoisieren bringt nichts, wenn das Kind nicht in React.memo eingepackt ist. Alle drei kosten Speicher und Vergleichszeit, deshalb setzt man sie bei gemessenen Problemen ein und nicht standardmäßig.

Was ist ein Closure in JavaScript? Gib ein Beispiel.

Ein Closure ist eine Funktion zusammen mit dem Scope, in dem sie erzeugt wurde, sodass sie auch nach Rückkehr der äußeren Funktion weiter auf dessen Variablen zugreifen kann. In React erklärt das den Stale-State-Effekt: Ein Effect oder Callback erfasst den State-Wert aus dem Render, in dem er erstellt wurde — ein einmal gesetztes Intervall liest also dauerhaft den ursprünglichen Wert. Die Lösung ist ein funktionales State-Update oder das Hinzufügen der Abhängigkeit zum Effect.

Erkläre die Event Loop: Wie funktionieren Microtasks und Macrotasks?

Der Call Stack arbeitet synchronen Code vollständig ab, danach leert die Event Loop die komplette Microtask-Queue — Promise-Callbacks und queueMicrotask — bevor genau ein Macrotask wie ein Timer oder ein I/O-Callback drankommt. Deshalb löst sich eine Promise-Kette vor einem setTimeout mit null Millisekunden auf. Das erklärt auch, warum eine Endlosschleife aus Microtasks das Rendering blockiert, eine Kette von Timern dagegen nicht.

Warum braucht man den key-Prop in Listen? Warum sollte man den Index vermeiden?

Keys erlauben React, Kinder zwischen Renders zuzuordnen, sodass DOM-Knoten verschoben statt neu erstellt werden — State und Fokus bleiben so erhalten. Der Array-Index bricht das, sobald die Liste umsortiert wird oder ein Element eingefügt wird, weil Index 0 dann plötzlich auf ein anderes Element zeigt — React verwendet den falschen DOM-Knoten weiter, und der Komponentenstate landet in der falschen Zeile. Ein stabiler Bezeichner aus den Daten ist der richtige Key.

Was sind controlled und uncontrolled Components?

Ein controlled Input bezieht seinen Wert aus dem React-State und aktualisiert ihn über onChange, sodass der State die einzige Quelle der Wahrheit ist und Validierung oder Formatierung unkompliziert sind. Ein uncontrolled Input hält seinen Wert im DOM, und man liest ihn bei Bedarf über eine ref aus. Controlled ist die Standardwahl; uncontrolled eignet sich für File-Inputs, die Integration mit Nicht-React-Code und sehr große Formulare, bei denen ein Rendering pro Tastenanschlag zu teuer wäre.

Wie funktioniert useEffect? Was ist die Cleanup-Funktion?

useEffect läuft, nachdem der Render auf dem Bildschirm committed wurde, und läuft erneut, sobald sich ein Wert im Dependency-Array ändert. Gibt man aus useEffect eine Funktion zurück, registriert das ein Cleanup, das React vor dem nächsten Lauf und beim Unmount aufruft — dort werden Subscriptions, Timer und laufende Requests abgebrochen. Fehlendes Cleanup ist die übliche Ursache für Memory Leaks und State-Updates an bereits unmounteten Komponenten.

Was ist Prop Drilling und wie vermeidet man es?

Prop Drilling bedeutet, Daten durch Komponenten zu reichen, die sie gar nicht brauchen, nur um einen tief verschachtelten Nachfahren zu erreichen. Context löst das für Werte, die für einen Teilbaum wirklich global sind, etwa Theme, Sprache oder den aktuellen User. Für häufig wechselnde Daten ist meist eine State-Library oder Komponentenkomposition — Elemente als children übergeben — die bessere Wahl, weil Context bei jeder Änderung alle Consumer neu rendert.

Was ist der Unterschied zwischen == und ===? Was ist Coercion?

=== vergleicht Wert und Typ ohne Umwandlung, während == die Operanden zuerst auf einen gemeinsamen Typ bringt, wodurch Ergebnisse wie null == undefined gleich true oder [] == false gleich true entstehen. Coercion ist genau diese implizite Umwandlung, und ihre Regeln sind komplex genug, dass sie unter Druck kaum jemand parat hat. Verwende === überall; die eine gängige Ausnahme ist x == null, um sowohl null als auch undefined abzufangen.