Interviewfragen zu React mit Antworten

Beispielfragen

Ein paar Fragen aus jedem Level mit richtiger Antwort und Erklärung.

React · Junior

1. Was ist React?
   ▸Antwort zeigen

   Richtige Antwort: Eine Bibliothek, um Benutzeroberflächen aus Komponenten zu bauen

   React ist nur für die UI zuständig: Es beschreibt die Oberfläche als Funktion des Zustands und aktualisiert das DOM effizient. Routing, Datenladen und der Rest kommen aus Bibliotheken (React Router, TanStack Query) oder aus Frameworks auf Basis von React (Next.js). JSX ist eine Syntaxerweiterung von JavaScript, keine eigene Sprache.

2. Was ist das virtuelle DOM in React?
   ▸Antwort zeigen

   Richtige Antwort: Eine JS-Beschreibung der UI, die React vergleicht, um die Seite zu aktualisieren

   Beim Rendern geben Komponenten einen Baum aus React-Elementen zurück, also einfache JS-Objekte. React vergleicht den neuen Baum mit dem vorherigen (Reconciliation) und wendet minimale Änderungen auf das echte DOM an. Es ist weder eine Browser-API noch eine Kopie des Browsers.

3. Wozu wird JSX beim Build umgewandelt?
   ▸Antwort zeigen

   Richtige Antwort: In Funktionsaufrufe, die React-Elemente erzeugen (jsx())

   <h1 className="t">Hi</h1> wird (von Babel, SWC, TypeScript) in einen Aufruf wie jsx("h1", { className: "t", children: "Hi" }) kompiliert, der ein Beschreibungsobjekt zurückgibt. Browser verstehen kein JSX, und React nutzt kein innerHTML - deshalb werden Strings in JSX automatisch escaped.

4. Wie setzt man in JSX eine CSS-Klasse auf ein Element?
   ▸Antwort zeigen

   Richtige Antwort: <div className="box">

   JSX ist näher an JavaScript, und class ist ein reserviertes Wort, daher heißen Attribute wie DOM-Eigenschaften: className, htmlFor statt for, tabIndex, onClick. Attribute data-* und aria-* schreibt man wie in HTML.

React · Middle

1. Wann behält React den Zustand einer Komponente zwischen Renderings bei?
   ▸Antwort zeigen

   Richtige Antwort: Solange derselbe Komponententyp an derselben Position bleibt

   Zustand hängt an einer Position im UI-Baum, nicht an einer Variablen. Rendert an derselben Stelle ein anderer Typ (<input> statt <textarea>, eine andere Komponente), wird der Teilbaum neu erzeugt und der Zustand geht verloren. Deshalb darf man Komponenten nicht in anderen Komponenten deklarieren: Jedes Rendering erzeugt einen neuen Typ.

2. Wie setzt man den Zustand von <EditForm /> zurück, wenn zu einem anderen Nutzer gewechselt wird?
   ▸Antwort zeigen

   Richtige Antwort: key={userId} übergeben - React erzeugt die Komponente neu

   Ein neuer key sagt React, dass es eine andere Komponente ist: Die alte wird samt Zustand unmountet, eine neue gemountet. Ein Reset per Effekt funktioniert, rendert aber erst veraltete Daten und korrigiert sie dann - ein zusätzliches Rendering und Flackern. forceUpdate gibt es nur bei Klassen, und es setzt den Zustand nicht zurück.

3. Was macht React.memo(Component)?
   ▸Antwort zeigen

   Richtige Antwort: Es überspringt das Rendern, wenn die Props flach gleich den vorherigen sind

   memo vergleicht jede Prop mit Object.is. Sind alle gleich, wird das vorherige Render-Ergebnis wiederverwendet. Änderungen am eigenen Zustand und am Context lösen trotzdem ein Rendering aus. Als zweites Argument kann man eine eigene Vergleichsfunktion übergeben.

4. Warum hilft memo nicht bei <List items={data} onSelect={() => select(id)} style={{ gap: 8 }} />?
   ▸Antwort zeigen

   Richtige Antwort: Callback und Style-Objekt werden bei jedem Rendern neu erzeugt

   Eine Inline-Funktion und ein Objektliteral sind bei jedem Rendern neue Referenzen, daher lässt der flache Vergleich sie nicht durch. Stabilisiere sie mit useCallback / useMemo oder verschiebe Konstanten aus der Komponente heraus. Der React Compiler macht das automatisch.

React · Senior

1. Warum ist cache() von React in Server Components nützlich?
   ▸Antwort zeigen

   Richtige Antwort: Es dedupliziert Aufrufe mit denselben Argumenten innerhalb eines einzigen Requests

   const getUser = cache(async (id) => db.user.find(id)) - mehrere Komponenten in einem Server-Rendering können getUser(1) aufrufen, und die Datenbankabfrage läuft einmal. Der Cache lebt nur innerhalb des Requests, sodass sich Daten verschiedener Nutzer nicht vermischen. Request-übergreifendes Caching macht man in Next.js mit 'use cache'.

2. Was ist Fiber in React?
   ▸Antwort zeigen

   Richtige Antwort: Die Architektur des Reconcilers: Das Rendern wird in unterbrechbare Arbeitseinheiten zerlegt

   Fiber (React 16+) stellt jeden Knoten des Baums als „Fiber“-Objekt mit Informationen über seine Arbeit dar. So lässt sich das Rendern pausieren, unterbrechen und priorisieren und Arbeit wiederverwenden - die Grundlage der Concurrent-Features (Transitions, Suspense). Der alte Stack-Reconciler lief rekursiv durch den Baum und konnte nicht anhalten.

3. Worin unterscheidet sich die Render-Phase von der Commit-Phase?
   ▸Antwort zeigen

   Richtige Antwort: Render ist unterbrechbar und kann sich wiederholen; Commit wendet Änderungen synchron auf das DOM an

   In der Render-Phase ruft React Komponenten auf und berechnet den Diff - sie kann unterbrochen, verworfen und neu gestartet werden, deshalb muss Rendern rein sein. In der Commit-Phase werden die Änderungen ohne Unterbrechung auf einmal auf das DOM angewendet, dann laufen Layout-Effekte und nach dem Zeichnen die normalen Effekte.

4. Was bringt Concurrent Rendering dem Nutzer?
   ▸Antwort zeigen

   Richtige Antwort: Dringende Updates (Tippen) können ein schweres, nicht dringendes Rendering unterbrechen

   Concurrent heißt nicht Multithreading: JS läuft weiterhin auf einem Thread. React kann mehrere Versionen der UI vorbereiten, die Kontrolle an den Browser abgeben und niedriger priorisierte Arbeit (Transitions) für dringende unterbrechen. Es greift, wenn man startTransition, useDeferredValue und Suspense nutzt.

Kombinierte Tests mit diesem Thema

Fragen aus mehreren Themen auf einmal, wie im Vorstellungsgespräch für eine konkrete Stelle.