React-Interviews mischen Framework-Spezifisches — Hooks, Rendering, State — mit JavaScript-Grundlagen, die zeigen, ob du wirklich verstehst, was React tut. Unten findest du die häufigsten Fragen mit Musterantworten. Junior: Grundlagentheorie, Definitionen und einfache Praxisfälle.
Es sagt React, welche Werte der Effect liest, sodass der Effect nur erneut läuft, wenn sich einer davon ändert. Ein leeres Array bedeutet: einmal nach dem Mount ausführen; lässt man das Array ganz weg, läuft der Effect nach jedem Render — genau so entstehen Endlosschleifen. Ein verwendeter Wert, der im Array fehlt, ist der andere Fehler: Der Effect schließt über einen veralteten Wert und nutzt ihn für immer weiter.
Der key sagt React, welches Element der neuen Liste welchem in der alten entspricht, damit ein Knoten verschoben statt neu gebaut werden kann. Der Index bricht das, sobald die Liste umsortiert oder ein Element entfernt wird: React gleicht nach Position ab, sodass der falsche Component den falschen State behält — eine angehakte Checkbox springt auf eine andere Zeile.
Props kommen vom Parent und sind in der empfangenden Komponente nur lesbar. State gehört der Komponente selbst, und eine Änderung löst ein Re-Rendering aus. Brauchen zwei Komponenten denselben Wert, gehört er in ihren nächsten gemeinsamen Parent und kommt als Prop wieder herunter — das nennt man State nach oben heben (Lifting State Up).
React entscheidet über ein Re-Rendering, indem es den alten Wert per Referenz mit dem neuen vergleicht. Ein push in ein Array ändert die Referenz nicht, also schließt React, dass nichts passiert ist, und überspringt das Rendering — die Daten sind aktualisiert, der Bildschirm nicht. Stattdessen ersetzt man den Wert: ein neues Array, ein neues Objekt.
Bei einem controlled Input wird der Wert vom React-State gesteuert und über ein onChange zurückgeschrieben, sodass der State die einzige Quelle der Wahrheit ist. Bei einem uncontrolled Input lebt der Wert im DOM, und man liest ihn über eine ref aus. Controlled ist die Standardwahl, weil Validierung, Formatierung und bedingtes Deaktivieren den Wert schon während des Renders brauchen; uncontrolled eignet sich, wenn ein Re-Render bei jedem Tastenanschlag verschwenderisch wäre.
React erkennt Hooks über die Aufrufreihenfolge, nicht über den Namen — der erste useState einer Komponente ist immer derselbe State-Slot. Ein Hook innerhalb eines if ändert diese Reihenfolge zwischen Renders, sodass React den falschen State an den falschen Hook liefert. Deshalb die Regel: Hooks unbedingt auf oberster Ebene aufrufen und die Bedingung stattdessen in den Hook hineinverlagern.
React bricht ab: Ist der neue Wert laut Object.is identisch mit dem aktuellen, wird nicht neu gerendert. Deshalb ist es kostenlos, eine Zahl auf denselben Wert zu setzen, aber nicht kostenlos, ein Objekt auf ein strukturell gleiches, aber neu erzeugtes Objekt zu setzen — die Referenz unterscheidet sich, also rendert React neu, obwohl sich sichtbar nichts geändert hat.
Im echten Interview sprichst du unter Druck. Cam stellt genau diese Fragen, bewertet jede Antwort und zeigt dir genau, was du verbessern musst.
Junior React Frontend-Interview üben →