25 beliebte Fragen für ein React-Interview

Okay, stellen Sie sich vor: Sie gehen in einen Zoom-Call, sehen drei Gesichter in der Kamera und ein schwarzes Quadrat mit der Aufschrift „Senior React Developer“. Das Herz ist schon irgendwo in den Fersen, die Hände sind feucht, und im Kopf dreht sich nur „bitte, nur nicht nach der Abstimmung fragen“.

Spoiler: werden sie fragen. Aber nach diesem Artikel werden Sie wie Tony Stark vor dem letzten Kampf bereit sein.

🔥 Grundlagen (die aus irgendeinem Grund jeder vergisst)

1. Was ist der Unterschied zwischen Real DOM und Virtual DOM?

Schwierigkeit: Einfacher als zu verstehen, warum Array.sort() ein Array mutiert

Kurze Antwort: Real DOM ist das, was tatsächlich im Browser angezeigt wird. Schwer, langsam, wie ein morgendliches Erwachen. Virtual DOM ist eine JavaScript-Kopie, leicht und schnell. React vergleicht sie durch Diffing und aktualisiert nur das, was sich geändert hat.

Was man beim Vorstellungsgespräch sagen sollte: „Virtual DOM ermöglicht es React, Updates zu patchen und teure Operationen mit Real DOM mithilfe des Reconciliation-Algorithmus zu minimieren. Es ist wie die Verwendung von Git — zuerst lokal festlegen, dann alle Änderungen auf einmal pushen."

2. Was ist JSX und warum schreiben wir HTML in JavaScript?

Schwierigkeit: Wie erklärt man einer Oma, was ein Mem ist

JSX ist ein Syntaxzucker über React.createElement(). Ohne JSX würde Ihr Code wie JSON aus der Hölle aussehen.

// Mit JSX (schön, ästhetisch)
<div className="hot">
  <h1>Привет, мир!</h1>
</div>

// Ohne JSX (Willkommen im Jahr 2013)
React.createElement('div', {className: 'hot'},
  React.createElement('h1', null, 'Hello, world!')
)

3. Funktions- vs. Klassenkomponenten — sind Klassen noch sinnvoll?

Schwierigkeit: Wie kann man argumentieren, was besser ist - Pizza oder Schawarma

Funktionskomponenten mit Hooks haben gewonnen. Klassen blieben wie Dinosaurier in Legacy-Projekten. Aber beim Vorstellungsgespräch kann man nach componentDidMount fragen - seien Sie bereit.

4. Erklären Sie useState — aber so, dass es interessant ist

const [coffee, setCoffee] = useState('no 😭');

// Nach ein paar Zeilen Code...
setCoffee('Yes! ☕');

Es ist wie Schrödingers Katze, aber man weiß immer, was drin ist.

5. useEffect — Warum brauchen wir ein Array von Abhängigkeiten?

Schwierigkeit: Verstehen, warum Ihr Effekt 1000 Mal ausgelöst wird

Klassiker des Genres: "Ich habe einen Endloszyklus in useEffect, Hilfe!"

// ❌ Endlose Hölle
useEffect(() => {
  setCount(count + 1); // Ein weiteres Ticket in die Unendlichkeit
});

// ✅ Kontrolliertes Chaos
useEffect(() => {
  fetchData();
}, []); // Leeres Array = einmal beim Einbinden

Regel: Wenn Sie eine Variable innerhalb von useEffect verwenden, fügen Sie sie zu den Abhängigkeiten hinzu. ESLint schimpft nicht umsonst.

6. useMemo vs useCallback - was ist der Unterschied?

Schwierigkeit: Wie man zwischen zwei identischen T-Shirts wählt

• useMemo merkt sich Wert (Ergebnis der Berechnungen)

• useCallback merkt sich Funktion

const expensiveValue = useMemo(() => {
  return calculatePi(1000000); // einmal berechnen
}, []);

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]); // Funktion wird nur neu erstellt, wenn die ID geändert wird

7. useRef - nicht nur für den Zugriff auf DOM

Es ist wie eine Jackentasche, in die man alles stecken kann, und es wird keinen Re-Render verursachen.

const renderCount = useRef(0);

useEffect(() => {
  renderCount.current += 1; // Kein Re-Render!
});

8. Ist es möglich, Hooks bedingt aufzurufen?

NEIN. NIE. VERGESSEN SIE ES.

// ❌ Dies ist der Weg zu Fehlern
if (condition) {
  useState(0); // React: "Am I a joke to you?"
}

// ✅ Richtig
const [state, setState] = useState(0);
if (condition) {
  // Wir verwenden hier state
}

🎭 Fortgeschrittene Konzepte (wo der Schmerz beginnt)

9. Was ist Abstimmung und wie funktioniert Fiber?

Schwierigkeitsgrad: Erklärung der Quantenphysik durch Meme

Reconciliation ist der Prozess des Vergleichens von Virtual DOM. Fiber ist eine neue Implementierung dieses Prozesses mit React 16+, die es ermöglicht, die Arbeit zu unterbrechen und wieder aufzunehmen (wie beim Speichern in einem Spiel).

10. Schlüssel in Listen — warum ist Index schlecht?

// ❌ Der Interviewer schüttelt den Kopf
{items.map((item, index) => 
  <div key={index}>{item}</div>
)}

// ✅ Der Interviewer nickt respektvoll
{items.map(item => 
  <div key={item.id}>{item}</div>
)}

Die Verwendung des Index als Schlüssel kann zu Fehlern beim Umstellen von Elementen führen. React wird denken, dass es sich um dieselben Elemente handelt, nur mit neuen Daten.

11. Context API — wann verwenden und wann zu Redux laufen?

Context für einfache Dinge (Thema, Sprache, Benutzer). Wenn Sie eine komplexe Zustandslogik haben, helfen Ihnen Redux oder Zustand.

12. Higher-Order Components (HOC) — Sind sie noch aktuell?

Technisch ja, aber ihre Hooks wurden praktisch begraben. Man muss wissen, aber nicht verwenden.

// Oldschool, aber sie können fragen
const withAuth = (Component) => {
  return (props) => {
    const isAuth = useAuth();
    return isAuth ? <Component {...props} /> : <Login />;
  };
};

13. Render Props — was ist das und warum?

Ein Muster, das mit dem Aufkommen der Hooks ebenfalls fast ausgestorben ist.

<DataProvider render={data => (
  <h1>Привет, {data.name}</h1>
)} />

⚡ Optimierung (damit nichts verlangsamt wird)

14. React.memo — wann anwenden?

Komponenten-Memoisierung. Verhindert unnötige Re-Renderings.

const ExpensiveComponent = React.memo(({ data }) => {
  // wird nur gerendert, wenn sich die Daten geändert haben
  return <div>{/* тяжёлые вычисления */}</div>;
});

15. Lazy Loading und React.Suspense

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

<Suspense fallback={<Spinner />}>
  <HeavyComponent />
</Suspense>

Der Benutzer ist glücklich, das Bundle ist kleiner, du bist ein guter Kerl.

16. Code-Splitting — Warum ist es wichtig?

Niemand möchte beim ersten Besuch der Website 5 MB JavaScript laden. Teilen und herrschen.

🔄 Datenzustand und -verwaltung

17. Kontrollierte vs. unkontrollierte Komponenten

Controlled: React überwacht den Status der Eingabe (über useState)
Uncontrolled: DOM verwaltet den Wert selbst (über ref)

// Kontrolliert (richtiger Weg)
const [value, setValue] = useState('');
<input value={value} onChange={e => setValue(e.target.value)} />

// Unkontrolliert (für faule Menschen)
const inputRef = useRef();
<input ref={inputRef} />

18. Prop Drilling — Problem und Lösungen

Wenn Sie Props durch 5 Ebenen von Komponenten werfen. Lösungen: Context API, Redux, composition.

19. Lifting State Up - was ist das?

Anhebung des Zustands auf eine höhere Ebene, damit mehrere Komponenten ihn verwenden können.

20. Redux vs MobX vs Zustand — was soll man wählen?

• Redux: wenn Sie Boilerplate und strenge Architektur lieben

• MobX: wenn Sie Magie und Reaktionsfähigkeit lieben

• Zustand: wenn Sie Einfachheit und Minimalismus lieben

Im Jahr 2025 gewinnt Zustand an Popularität bei neuen Projekten.

🧪 Testen

21. React Testing Library vs Enzyme

Enzyme ist veraltet. Verwenden Sie die React Testing Library.

import { render, screen } from '@testing-library/react';

test('button exists', () => {
  render(<Button />);
  expect(screen.getByRole('button')).toBeInTheDocument();
});

22. Was ist Snapshot-Testen?

Speichern Sie eine "Momentaufnahme" der Komponente und vergleichen Sie sie mit den Änderungen. Nützlich, aber nicht zu überschätzen.

🚀 React 18+ und die Zukunft

23. Concurrent Rendering — was hat sich geändert?

React kann das Rendern unterbrechen und fortsetzen. Keine Schnittstellen-Freezes mehr.

24. Automatische Dosierung — Warum brauchen Sie es?

React 18 patcht alle Status-Updates automatisch, auch in Promises und Timeouts.

25. useTransition und useDeferredValue — wofür?

Ermöglichen es, Aktualisierungen als nicht dringend zu kennzeichnen, wobei wichtigere Priorität haben.

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchQuery(input); // Blockiert nicht die Benutzereingabe
});

🎓 Bereit für das Vorstellungsgespräch? Und für die Praxis?

Theorie lernen ist wie das Lesen einer IKEA-Anleitung. Echte Fähigkeiten erlangt man, wenn man Möbel mit eigenen Händen zusammenbaut (Code schreibt).

Genau dafür haben wir Kodik entwickelt - eine App, mit der man nicht nur über React lesen, sondern auch sofort üben kann. Jede Lektion ist ein Mini-Projekt, das direkt im Browser durchgeführt werden kann. Von useState bis hin zu produktionsbereiten Anwendungen.

Das Tolle daran ist, dass die Theorie sofort in die Praxis umgesetzt wird. Sie müssen nicht zwischen Registerkarten wechseln, nach Orten suchen, an denen Sie den Code ausführen können, oder die Umgebung anpassen. Kodik öffnen und los geht's mit dem Programmieren.

Und wir haben auch Telegram-Kanal, wo jeden Tag nützliche Beiträge veröffentlicht werden: Konzeptanalysen, Programmiermeme, aktuelle Stellenangebote und Lifehacks. Es ist wie ein tägliches Gehirntraining — man scrollt durch den Feed und pumpt sich auf.

Ideal für die Wiederholung des Materials in der U-Bahn, vor dem Schlafengehen oder in der Mittagspause. Programmieren sollte bequem sein!

Denken Sie daran: Bei einem Vorstellungsgespräch ist es wichtig, nicht nur die Antworten zu kennen, sondern auch argumentieren zu können. Wenn Sie es nicht wissen, sagen Sie es, aber zeigen Sie, wie Sie nach der Antwort suchen würden. Interviewer schätzen Ehrlichkeit und die Fähigkeit zu lernen mehr als das Auswendiglernen aller APIs.

Viel Glück beim Interview! Mögen Ihre Komponenten immer effizient gerendert werden und Bugs vor der Produktion gefunden werden 🚀