React-Interviewleitfaden: Hooks, Rendering und was große Unternehmen fragen

Klassische Herausforderung: Eine Liste mit 10.000 Zeilen wird beim Eingeben in das Suchfeld langsam. Man sollte auf Debouncing, Virtualisierung sowie memoisierte Zeilen zurückgreifen.

4. State-Management

• Lokaler vs globaler vs Server-State — Die getrennte Benennung von Server-States (Cache, Neuvalidierung, Lade-/Fehlerzustand) im Gegensatz zum UI-State beeindruckt die Entscheider.
• Context vs Redux/Zustand — Context für seltene globale Daten (Theme, Authentifizierung); Redux/Zustand, wenn man Middleware, Tools, komplexe Updates oder häufige Schreibvorgänge ohne Probleme durch Context-Überlastung benötigt.
• React Query / SWR / TanStack Query – Caching, Hintergrundabruf neu, Deduplizierung, damit man nicht erneut den useEffect-Fetch-Code entwickeln muss.
• Grundlagen von Redux (falls die Technologiestack verwendet wird): Actions, Reducer, Store, thunk/saga-Middleware, reine Reducer.

5. Designmuster

• HOCs – Ein Komponente umhüllen; klassisches Beispiel withAuth.
• Render-Props – Logik über eine Funktionsprop teilen; meist durch Hooks ersetzt, aber konzeptionell immer noch relevant.
• Komponenten mit zusammengesetzter Struktur – Geschwisterkomponenten teilen impliziten Zustand über Context (Select / Select.Option).
• Container-/Präsentationskomponenten – Daten versus UI; mit Hooks weniger streng vorgegeben, doch die Trennung der Aufgaben bleibt wichtig.
• Komposition statt Vererbung – Reacts bevorzugte Vorgehensweise zur Wiederverwendung; seien Sie bereit, sie zu rechtfertigen.

6. Lebenszyklus einer Klasse (immer noch gefragt)

Unternehmen, die Hooks bevorzugen, untersuchen weiterhin grundlegende Konzepte oder veraltete Codebasen.

• componentDidMount ≈ useEffect(() => {}, [])
• componentDidUpdate ≈ Effect-Funktion mit Abhängigkeiten
• componentWillUnmount ≈ Aufräumen von Effect-Funktionen
• Fehlergrenzen – nur in Klassen möglich (componentDidCatch / getDerivedStateFromError); Hooks haben keinen Äquivalent, weshalb Wrapper wie react-error-boundary existieren.

7. Kenntnisse zu React 18+

• Konkurrenzloses Rendering – unterbrechbare Aufgaben für eine reaktionsfähigere Benutzeroberfläche.
• useTransition – Markierung weniger dringender Aktualisierungen, damit das Tippen weiterhin schnell bleibt.
• useDeferredValue – verzögert die Anzeige nicht kritischer Benutzeroberflächen.
• Automatisches Batching – gruppiert Operationen innerhalb von Promises, Timeout-Funktionen und nativen Handlern (nicht nur React-Handlern).
• Suspense für Daten – besonders relevant bei Next.js/Remix-basierten Architekturen.
• Server Components – was wo ausgeführt wird und warum die Client-Bundles kleiner werden.

8. JavaScript, das heimlich eindringt

• Closures – veralteter Hook-Zustand.
• Event-Loop / Mikro- vs. Makrotasks – warum Batching so funktioniert, wie es funktioniert.
• this-Binding – falls Klassen verwendet werden.
• Debounce vs. Throttle – fast immer empfohlen, oft im Zusammenhang mit „Optimierung dieses Suchfeldes“.
• Flaches vs. tiefes Vergleichen – React.memo / useMemo und warum Objektliteralen die Memoisierung verhindern.
• Promises / async-await – Rennen beim Abrufen von Daten, wenn Benutzer schnell tippen.

9. Testing

• Testing Library – Verhalten statt Interna (Abfragen nach Rolle/Text).
• Jest – Mocking von APIs; Kenntnis der Snapshots-Beschränkungen.
• Unit-Tests, Integrationstests und E2E-Tests sowie der übliche Platz für Komponententests.

10. Wiederholte Live-Coding-Sessions

• Debounced Suchfunktionen/Autocomplete
• Kundenspezifisches useFetch mit Statusen für Ladevorgang/Fehler/Daten
• Unendliches Scrollen oder Paginierung
• Modale Fenster über Portalen (createPortal) und warum Portalen notwendig sind (Vermeidung von Überlauf/z-Index bei Beibehaltung der Reaktionsstruktur für Ereignisse/Kontext)
• Zähler mit Undo/Redo mithilfe von useReducer
• „Fehler finden“ durch veraltete Schließfunktionen oder fehlende Abhängigkeiten

Beispielaufschlüsselung

„Warum führt dieser useEffect zu einem Endlosschleifen?“

useEffect(() => {
  setData({ ...data, updated: true });
}, [data]);

Klare Antwort: Der Effekt listet data als Abhängigkeit auf und schreibt anschließend ein neues Objekt wieder in data zurück, wodurch sich bei jedem Ausführungsvorgang die Abhängigkeit ändert und der Effekt sofort erneut ausgelöst wird. Die Lösung besteht darin, data von den Abhängigkeiten zu entfernen, wenn keine erneute Auslösung erforderlich ist, die Aktualisierung außerhalb des Effekts durchzuführen oder einen funktionalen Aktualisierer mit engeren Abhängigkeiten zu verwenden.

Das Erklären von warum es zu Fehlverhalten kommt – anstatt nur einen Patch vorzuschlagen – ist es, was starke Antworten in React-Interviews auszeichnet.

Fazit

Tiefe ist wichtiger als das auswendig gelernte Grundwissen einer API. Die Interviewer interessieren sich für das Renderverhalten, Closures sowie Leistungsabwägungen – also die Fehler, die in der Produktion auftauchen. Bereiten Sie sich vor, indem Sie kleine Komponenten erstellen, die absichtlich Fehler aufweisen (veraltete Closures, fehlende Abhängigkeiten, überflüssige Neuerstellungen), und diese beheben. Genau dieses Fähigkeit zum Debuggen wird bei den Interviews wirklich bewertet.

Üben Sie, indem Sie sich wie bei einem Interview eine Zeitvorgabe setzen: Erklären Sie den Virtual DOM in sechzig Sekunden, fügen Sie anschließend einen Codeausschnitt mit veralteten Closures zum Debuggen hinzu und skizzieren Sie schließlich eine verzögerte Suchfunktion. Diese Abfolge entspricht dem tatsächlichen Ablauf in den Interviews.

Wie Panels normalerweise eskalieren

Die Aufwärmübungen beinhalten den Virtual DOM, kontrollierte Eingaben und Tasten. In den mittleren Stufen kommen Hooks zum Einsatz: gebündelte Aktualisierungen, doppelte Effekte im Strict Mode, Vergleich zwischen Memoisierung und Callbacks sowie das Schreiben eines eigenen Hooks live. In den fortgeschrittenen Stufen geht es um Leistungsaspekte – Listen mit zehntausend Zeilen, Context-Probleme, Beweise aus dem Profiler – sowie um Architekturentscheidungen zwischen Context, Redux/Zustand und TanStack Query für Server-Zustände.

Führen Sie ein persönliches „absichtlich kaputtes“ Repository: einen Zähler für veraltete Schließungen, einen Effekt mit fehlenden Abhängigkeiten, eine gememoisierte Liste, die aufgrund von inline-Objekten dennoch neu gerendert wird, sowie ein Portal-Modal. Das Vorlesen der Erklärungen zu diesen vier Fehlern umfasst einen überraschend großen Teil der Zeit, die für Live-Programming und Whiteboard-Sessions benötigt wird.

Falls die Stelle React 18+ erwähnt, sollten Sie jeweils einen Satz zu konkurrierendem Rendering, Übergängen, verzögerten Werten, automatischem Bündeln und Server Components parat haben. Tiefe Kenntnisse zu einer konkreten Implementierung sind besser als vage Kenntnisse aller RFCs.