React-Interviewfragen: zehn Fragen mit Hinweisen zur Bewertung

Nutzen Sie die Fragen als Gesprächseinstieg

Fragen Sie nach Fähigkeiten, die zu Ihrer tatsächlichen Arbeit gehören. Wählen Sie daraus fünf bis sieben Themen und vertiefen Sie Antworten mit einem konkreten Beispiel. Eine technische Vokabel oder eine auswendig gelernte Definition belegt noch keine sichere Umsetzung. Teilen Sie vorab mit, ob Dokumentation, Internet und KI-Werkzeuge erlaubt sind.

Die React-Dokumentation führt Komponenten, Zustände und Datenfluss als zentrale Denkschritte für den Aufbau von Oberflächen ein. Sie ist eine gute Referenz für Begriffe, aber kein alleiniger Maßstab für die beste Lösung in jedem Produkt. React: Thinking in React

Zehn Fragen und woran Sie gute Antworten erkennen

Drei kurze Antworten mit Code

1. Suchergebnisse aus vorhandenem Zustand berechnen

Ausgangslage: Die Komponente speichert Suchtext, Statusfilter und zusätzlich eine Ergebnisliste. Ein gelöschter Filter kann die Liste veralten lassen. Eine gute Antwort speichert nur Suchtext und Filter und berechnet Treffer beim Rendern:

const products = [
  { name: "Plan", status: "active" },
  { name: "Notiz", status: "archived" },
];
const query = "pla";
const status = "all";
const visible = products.filter((product) =>
  product.name.toLowerCase().includes(query.toLowerCase()) &&
  (status === "all" || product.status === status)
);
console.log(visible.map((product) => product.name));

Erwartete Ausgabe: ["Plan"]. Bei vielen großen Einträgen kann Memoisierung nach Messung sinnvoll sein; sie ist nicht der erste Schritt.

2. Listen mit stabiler Kennung darstellen

Ausgangslage: Eine Liste enthält Produkte mit IDs p7 und p9. Bei Einfügen eines Eintrags an den Anfang bleiben die Schlüssel an den Datenobjekten:

let products = [
  { id: "p7", name: "Plan" },
  { id: "p9", name: "Notiz" },
];
const keys = (items) => items.map((product) => product.id);
console.log(keys(products));
products = [{ id: "p3", name: "Ordner" }, ...products];
console.log(keys(products));

Erwartete Schlüssel: erst p7, p9; nach Einfügen des Produkts p3 vorn: p3, p7, p9. Im JSX steht entsprechend <li key={product.id}>. Ein Array-Index kann nach einer Umordnung denselben Schlüssel einem anderen Element geben.

3. Antwort einer älteren Suche nicht übernehmen

Ausgangslage: Suche „ka“ startet zuerst, Suche „karte“ danach. Wenn „ka“ zuletzt antwortet, darf sie das neuere Ergebnis nicht überschreiben. Die nächste Anfrage erhält eine höhere Kennung:

let latestRequest = 0;
let visibleItems = [];
async function loadSearch(query, fetchItems) {
  const requestId = ++latestRequest;
  const items = await fetchItems(query);
  if (requestId === latestRequest) visibleItems = items;
}
const pending = {};
const fetchItems = (query) => new Promise((resolve) => { pending[query] = resolve; });
const first = loadSearch("ka", fetchItems);
const second = loadSearch("karte", fetchItems);
pending["karte"](["Karte"]);
await second;
pending["ka"](["Kaffee"]);
await first;
console.log(visibleItems);

In einer React-Komponente lässt sich dasselbe mit Bereinigung im Effect oder einem passenden Abbruchsignal ausdrücken. Der richtige Ansatz hängt davon ab, ob die Anfrage abgebrochen werden kann und wie der vorhandene Datenabruf aufgebaut ist.

Eine faire Arbeitsprobe kann KI ausdrücklich erlauben

Aufgabe: „Ergänzen Sie in einer vorbereiteten React-Ansicht Suche und Filter für eine Liste. Zeigen Sie Lade-, Leer- und Fehlerzustand. Erklären Sie, welche Werte Zustand sind, welche Sie berechnen und welche Prüfungen Sie vor einer Übergabe ergänzen würden.“ Verwenden Sie fiktive Daten, einen klar begrenzten Umfang und gleiche Regeln für alle Bewerber.

Erlauben Sie Dokumentation und ein frei verfügbares KI-Werkzeug, wenn das der späteren Arbeit entspricht. Bitten Sie die Person, die Nutzung offenzulegen, erzeugten Code zu prüfen und eine Änderung live zu erklären. Bewerten Sie, ob die Lösung zum Auftrag passt, nicht ob jemand KI verwendet hat. Vertrauliche Unternehmensdaten gehören nicht in externe Werkzeuge.

Bewerten Sie diese Punkte jeweils als belegt, teilweise belegt oder noch nicht gezeigt: Zustandsmodell, Abdeckung der UI-Zustände, Verständlichkeit der Komponenten, passende Tests und Qualität der Begründung. Notieren Sie zu jeder Einstufung, was die Person konkret gezeigt hat.

Fiktives Beispiel: Ein KI-Vorschlag wird nicht ungeprüft übernommen

Fiktives Beispiel, kein realer Kundenfall: Eine Bewerberin bittet ein KI-Werkzeug, einen Filter für Produktdaten zu erstellen. Der Vorschlag speichert sowohl die Suchbegriffe als auch eine zweite Ergebnisliste. Sie prüft den Code, erkennt, dass die Ergebnisliste aus dem vorhandenen Array berechnet werden kann, entfernt den doppelten Zustand und ergänzt einen Test für leere Treffer.

Das Urteil lautet für diese Probe: Zustandsmodell belegt, weil die Person den doppelten Zustand erkannt und erklärt hat; Tests teilweise belegt, weil nur der Leerfall geprüft wurde; Fehlerzustand noch nicht gezeigt, weil in der Probe kein Fehlerpfad umgesetzt war. Diese Beobachtungen zeigen, was in der Aufgabe zu sehen war. Sie garantieren weder spätere Leistung noch Teamfit. React empfiehlt, Zustand möglichst einfach und frei von redundanten Informationen zu halten. React: Choosing the State Structure

Das Gespräch ist ein Teil Ihrer Auswahl

Eine Interviewfrage prüft immer nur eine begrenzte Situation. Kombinieren Sie das Gespräch mit einer fairen Arbeitsprobe, passenden Beispielen und der Prüfung Ihrer Zusammenarbeit. Ein besonders flüssiges Interview ersetzt keine echte Sicht auf die Arbeit.

Division5 gleicht den Bedarf mit vorab geprüften Profilen ab. Sie können die geprüften Profile und aufgezeichneten Interviews schon vor dem Kennenlernen ansehen. Für alle Fachkräfte gilt eine 30-tägige Testphase; Umfang und Bedingungen halten Sie vor Beginn schriftlich fest. Verfügbarkeit wird für Ihre Anfrage geprüft. So läuft der Auswahlprozess ab.

Sie behalten die Verantwortung für Aufgaben, Prioritäten, Codezugriff, Abnahme und technische Führung. Fachkräfte für Ihr Team ansehen.