60 React-Interviewfragen mit kurzen, präzisen Antworten und Code: Grundlagen, Hooks, State, Rendering und Performance, Muster, Server Components und React 19 sowie Testing. Filtere nach Thema und Level.
Diese 60 React-Interviewfragen decken ab, was in Interviews am häufigsten gefragt wird: JSX, Props und State, Hooks wie useState und useEffect, Keys, Rendering und memo, Context, Error Boundaries, Server Components und Neuerungen aus React 19 wie useActionState. Jede hat eine kurze Antwort in klaren Worten, viele mit Code, und du kannst nach Thema und Level filtern.
Wie die Fragen aufgeteilt sind
Nutze die Filter, um einen Bereich gezielt zu üben, öffne eine Antwort erst, nachdem du deine eigene laut ausgesprochen hast, und lies die Codebeispiele als die Art von Aufgabe, die ein Interviewer dich spontan schreiben lassen könnte.
State und Props, Hooks (vor allem useEffect und sein Dependency-Array), Keys in Listen, Re-Rendering und Memoisierung, Context und Datenladen. Bei Senior-Rollen kommen Performance-Profiling, Architektur und Server Components dazu.
Immer weniger. Neuer Code nutzt Funktionskomponenten und Hooks. Es hilft aber weiterhin, Lifecycle-Methoden beim Lesen von älterem Code zu erkennen, und Error Boundaries werden noch als Klassen geschrieben.
Baue kleine Dinge von Grund auf: eine Todo-Liste, ein Suchfeld mit gedrosseltem Fetch, ein Modal mit Fokus-Handling. Sprich beim Programmieren laut mit und teste Randfälle wie leere Listen und Fehler.
Zunehmend, zumindest auf dem Niveau, dass du sie kennst: ref als Prop, Actions mit useActionState, useOptimistic, die use-API und Server Components.
Unsicher bei Re-Renders? Sieh live zu, wie sie gezählt werden, in
Eine JavaScript-Bibliothek, um Benutzeroberflächen aus Komponenten zu bauen. Du beschreibst, wie der Bildschirm für die aktuellen Daten aussehen soll, und React aktualisiert die Seite, wenn sich die Daten ändern.
Eine Syntax, die wie HTML in JavaScript aussieht. Ein Build-Schritt macht aus jedem Tag einen Funktionsaufruf, der ein React-Element erzeugt, daher kannst du in geschweiften Klammern jeden beliebigen JavaScript-Ausdruck verwenden.
Eine Funktion, die Props entgegennimmt und JSX zurückgibt. Namen beginnen mit einem Großbuchstaben, damit React sie von HTML-Tags unterscheiden kann.
Die Eingaben, die eine Elternkomponente an eine Kindkomponente übergibt, ähnlich wie Attribute an einem HTML-Tag. Eine Komponente darf ihre eigenen Props nicht ändern; sie erhält neue, wenn die Elternkomponente neu rendert.
Props kommen von der Elternkomponente und sind in der Komponente schreibgeschützt. State gehört der Komponente selbst und ändert sich mit der Zeit über seinen Setter, was ein Re-Render auslöst.
Keys sagen React, welcher Eintrag welcher ist, damit es zwischen Renders den richtigen State und DOM-Knoten bei jedem Eintrag behält, wenn die Liste umsortiert, gefiltert oder erweitert wird. Verwende eine stabile id aus deinen Daten, nicht den Array-Index, wenn sich die Reihenfolge ändern kann.
Mit normalem JavaScript: ein if vor dem return, der ternäre Operator in JSX oder && für anzeigen oder nichts. Vorsicht bei && und Zahlen: 0 && <X /> rendert eine 0.
Ein Wrapper, der mehrere Elemente gruppiert, ohne einen DOM-Knoten hinzuzufügen. Schreibe <>...</> oder <Fragment key={...}>, wenn die Gruppe in einer Liste einen Key braucht.
Übergib eine Funktion an eine Prop in camelCase wie onClick. React übergibt ein synthetisches Event, das sich wie das Browser-Event verhält. Übergib die Funktion selbst, nicht das Ergebnis ihres Aufrufs.
Die Beschreibung der UI als einfache Objekte, die React bei jedem Render erstellt. React vergleicht die neue Beschreibung mit der letzten und überträgt nur die Unterschiede auf das echte DOM. Dieser Vergleich heißt Reconciliation.
Es gibt einer Komponente ein Stück State und eine Funktion, um ihn zu aktualisieren. Der Aufruf des Setters plant ein Re-Render mit dem neuen Wert ein; die Variable im aktuellen Render ändert sich nicht.
Wenn der nächste Wert vom vorherigen abhängt, besonders bei mehreren Updates in einem Event. Jeder Updater erhält den neuesten eingereihten Wert, während setCount(count + 1) zweimal beide Male denselben veralteten count verwendet.
Um sich nach dem Render mit etwas außerhalb von React zu synchronisieren: einem Abonnement, einem Timer, einem Nicht-React-Widget oder einer Netzwerkanfrage. Das Dependency-Array legt fest, wann es erneut läuft, und die zurückgegebene Funktion räumt auf.
Um Werte aus Props oder State zu berechnen (berechne sie stattdessen während des Renders) oder um auf ein Nutzerereignis zu reagieren (erledige die Arbeit im Event-Handler). Effects dienen der Synchronisation mit externen Systemen.
Rufe Hooks nur auf der obersten Ebene einer Komponente oder eines Custom Hooks auf, nie in Schleifen, Bedingungen oder verschachtelten Funktionen, und nur aus React-Funktionen. React verlässt sich darauf, dass die Aufrufreihenfolge bei jedem Render gleich ist.
Um einen Wert zu halten, der Renders überdauert, ohne bei einer Änderung eines auszulösen, etwa einen DOM-Knoten, eine Timer-id oder einen vorherigen Wert. Gelesen und geschrieben wird er über ref.current.
useMemo cacht das Ergebnis einer Berechnung; useCallback cacht eine Funktion. Beide geben dasselbe zurück, bis sich eine Abhängigkeit ändert, und beide sind vor allem wichtig, wenn du Werte an memoisierte Kindkomponenten übergibst.
Eine Möglichkeit, einen weiter oben im Baum bereitgestellten Wert zu lesen, ohne Props durch jede Ebene zu reichen. Jede Komponente, die einen Context liest, rendert neu, wenn sich sein Wert ändert.
Wenn sich mehrere Werte gemeinsam ändern oder der nächste State von einem Action-Typ abhängt, etwa bei einem Formular-Assistenten oder einem Warenkorb. Der Reducer hält alle Übergänge in einer testbaren Funktion.
Eine Funktion, deren Name mit use beginnt und die andere Hooks aufruft. Sie teilt zustandsbehaftete Logik zwischen Komponenten; jede Komponente, die sie aufruft, bekommt ihren eigenen State.
Es läuft, nachdem React das DOM geändert hat, aber bevor der Browser zeichnet, sodass du das Layout messen und anpassen kannst, ohne sichtbares Flackern. Es blockiert das Zeichnen, nutze es also nur dafür.
Um eine eindeutige id zu erzeugen, die beim Rendern auf Server und Client übereinstimmt, damit Labels, Eingabefelder und Beschreibungen verknüpft werden können. Für Listen-Keys ist es nicht gedacht.
Gemeinsamen State in die nächstgelegene gemeinsame Elternkomponente der Komponenten verschieben, die ihn brauchen, und ihn dann zusammen mit Funktionen zum Ändern als Props nach unten reichen.
React entscheidet über ein Re-Render, indem es alten und neuen Wert vergleicht. Wenn du ein Objekt oder Array direkt veränderst, bleibt die Referenz dieselbe, und React überspringt das Update womöglich. Erzeuge stattdessen eine neue Kopie.
Ein kontrolliertes Eingabefeld bekommt seinen Wert aus dem State und meldet Änderungen über onChange. Ein unkontrolliertes Eingabefeld hält seinen Wert selbst im DOM, und du liest ihn über eine ref oder beim Absenden des Formulars aus.
Ein Wert, den du aus vorhandenen Props oder State berechnen kannst, etwa eine gefilterte Liste. Ihn separat zu speichern heißt, zwei Kopien synchron halten zu müssen; wird er während des Renders berechnet, kann er nicht abweichen.
Props durch Komponenten zu reichen, die sie gar nicht nutzen, nur um ein tief liegendes Kind zu erreichen. Lösungen sind Komposition (children übergeben), Context oder eine State-Bibliothek für wirklich globale Daten.
Wenn viele weit voneinander entfernte Komponenten denselben Client-State lesen und ändern und Context zu viele Re-Renders verursacht, oder wenn du Werkzeuge wie Devtools und Middleware brauchst. Serverdaten werden meist besser von einer Bibliothek zum Datenladen verwaltet, die sie cacht.
In einem Framework mit Server Components lädst du auf dem Server. Auf dem Client nutzt du eine Datenbibliothek oder einen Effect, der die Anfrage startet, Laden und Fehler behandelt und das Ergebnis ignoriert, wenn die Komponente entfernt wurde oder sich die Eingabe geändert hat.
Nein. Updates werden eingereiht und gebündelt; ab React 18 werden auch Updates aus Timeouts und Promises gebündelt, nicht nur aus Event-Handlern. Der neue Wert erscheint im nächsten Render.
Ihr State ändert sich, ihre Elternkomponente rendert neu oder ein Context, den sie liest, ändert sich. Ein Re-Render ändert nicht immer das DOM; React aktualisiert nur, was sich unterscheidet.
Es überspringt das Re-Render einer Komponente, wenn ihre Props bei einem flachen Vergleich gleich wie beim letzten Mal sind. Das lohnt sich nur, wenn die Komponente oft mit denselben Props rendert und ihr Render nicht billig ist.
Ein Wrapper nur für die Entwicklung, der zusätzliche Prüfungen ausführt: Er rendert Komponenten und führt Effects doppelt aus, um Seiteneffekte und fehlendes Cleanup aufzudecken. In der Produktion tut er nichts.
Zeichne die Interaktion im Profiler der React DevTools auf einem Produktions-Build auf, suche nach Komponenten, die oft rendern oder lange brauchen, und behebe dann die Ursache: State nach unten verschieben, memoisieren oder lange Listen virtualisieren.
Eine Möglichkeit, ein Update als nicht dringend zu markieren. React hält die Eingabe reaktionsfähig und kann das langsame Render unterbrechen, und mit isPending kannst du zeigen, dass gerade gearbeitet wird.
Es gibt dir eine Kopie eines Werts, die bei aufwendigem Rendern hinterherhinken darf. Beim Tippen aktualisiert sich das Eingabefeld sofort, während die teure Liste mit dem verzögerten Wert rendert.
Virtualisiere sie: Rendere mit einer Bibliothek wie react-window oder TanStack Virtual nur die sichtbaren Zeilen. Auch Paginierung oder Nachladen beim Scrollen begrenzt die Zahl der DOM-Knoten.
Teile der App erst laden, wenn sie gebraucht werden. React.lazy mit einem dynamischen Import und einem Suspense-Fallback lagert eine Komponente in eine eigene Datei aus.
React an HTML anzuhängen, das auf dem Server gerendert wurde, damit das vorhandene Markup interaktiv wird, ohne neu aufgebaut zu werden. Rendert der Client etwas anderes, meldet React einen Hydration-Mismatch.
Ein Werkzeug zur Build-Zeit, das Komponenten analysiert und automatisch Memoisierung hinzufügt, sodass viel von Hand geschriebenes useMemo, useCallback und memo überflüssig wird. Es erwartet Code, der den Regeln von React folgt.
Komponenten zu bauen, indem man andere in sie hineinsetzt, oft über children oder andere Props. React-Komponenten teilen Verhalten über Komposition und Hooks, und das React-Team hat keinen Fall gefunden, in dem Vererbungshierarchien helfen.
Alles, was du zwischen das öffnende und das schließende Tag einer Komponente setzt. Damit kann eine Layout- oder Wrapper-Komponente Inhalte rendern, die sie nicht kennt.
Eine Funktion, die eine Komponente entgegennimmt und eine neue mit zusätzlichem Verhalten zurückgibt. Custom Hooks haben die meisten Anwendungsfälle ersetzt, weil sie Logik teilen, ohne zu umschließen und Props umzubenennen.
Eine Komponente, die Fehler beim Rendern ihrer Kinder abfängt und einen Fallback statt einer leeren Seite zeigt. Sie wird noch immer als Klasse mit getDerivedStateFromError geschrieben oder mit einer kleinen Bibliothek umgesetzt.
Kinder mit createPortal in einen anderen DOM-Knoten rendern, etwa document.body. Das wird für Modals und Tooltips verwendet, die dem overflow oder der Stapelreihenfolge einer Elternkomponente entkommen müssen.
In React 19 akzeptieren Funktionskomponenten ref als normale Prop. In früheren Versionen umschließt du das Kind mit forwardRef. Mit useImperativeHandle legst du nur bestimmte Methoden offen.
Eine Gruppe von Komponenten, die zusammenarbeiten und State über Context teilen, etwa Tabs mit Tabs.List und Tabs.Panel. Der Nutzer ordnet die Teile an, während die Elternkomponente die Logik verwaltet.
Komponenten, die nur auf dem Server laufen und ihr gerendertes Ergebnis an den Browser senden, nicht ihren Code. Sie können Daten direkt lesen; interaktive Teile kommen in Client Components, die mit "use client" markiert sind.
Es markiert eine Datei als Beginn von Client-Code: Dieses Modul und alles, was es importiert, wird für den Browser gebündelt und kann State, Effects und Event-Handler nutzen.
Async Funktionen, die auf dem Server laufen, aber vom Client aufgerufen werden können, meist als Formular-Action. Behandle jede wie einen öffentlichen Endpunkt: Eingaben validieren und Berechtigungen prüfen.
Es umschließt eine Action-Funktion und gibt ihr letztes Ergebnis zurück, eine umschlossene Action, die du an ein Formular übergibst, und ein Pending-Flag. So zeigst du in React 19 Rückmeldungen zu Formularen an.
Eine API aus React 19, die während des Renders den Wert eines Promise oder eines Context liest. Anders als Hooks darf sie in Bedingungen aufgerufen werden; mit einem Promise suspendiert sie, bis der Wert bereit ist.
Es zeigt das erwartete Ergebnis einer Action sofort an, etwa einen neuen Kommentar, während die Anfrage noch läuft, und übernimmt dann das echte Ergebnis, sobald es zurückkommt.
Eine Komponente, die einen Fallback zeigt, solange etwas darin noch nicht bereit ist, etwa lazy geladener Code oder Daten in einem Framework, das dies unterstützt. Mit Server-Rendering lassen sich so Teile der Seite später nachstreamen.
Rendere sie mit React Testing Library in einem Test-Runner wie Vitest oder Jest, interagiere wie ein Nutzer (klicken, tippen) und prüfe, was sichtbar ist, nicht den internen State.
Abfragen wie getByRole("button", { name: "Save" }) finden Elemente so, wie Hilfstechnologien es tun, daher prüfen Tests gleichzeitig, dass die UI barrierefrei ist, und überstehen Änderungen am Markup.
Die React-Dokumentation empfiehlt, für vollständige Apps mit einem Framework wie Next.js oder React Router zu starten. Für eine reine Client-App ist Vite ein gängiges Build-Tool.
Verwende semantische HTML-Elemente, beschrifte jedes Eingabefeld, steuere den Fokus in Dialogen, erhalte Tastaturzugang für alles Klickbare und teste mit einem Screenreader und einem automatischen Prüftool.
Liefere für jede URL echtes HTML über Server-Rendering, statische Generierung oder Prerendering aus, gib jeder Route einen eigenen Titel und eine eigene Meta-Beschreibung und liste die URLs in einer Sitemap.
Korrekte Keys in Listen, Effects mit vollständigen Abhängigkeiten und Cleanup, kein State, der abgeleitet werden könnte, barrierefreies Markup, Fehler- und Ladezustände und keine Geheimnisse im Client-Code.
Alle
Junior
Mid
Senior
Thema
Level
Suchen
effect, key, memo...
{shown} von {total} Fragen
Kostenlos starten · Keine Kreditkarte nötig