Question 1

Was ist der Hauptunterschied zwischen let und var?

Accepted Answer

let deklariert eine blockscopierte Variable, d. h. sie existiert nur innerhalb des Blocks, in dem sie definiert ist (zwischen geschweiften Klammern). var hat einen Funktionsscope, was unerwartete Fehler verursachen kann, da die Variable in der gesamten Funktion zugänglich ist. Die standardmäßige Verwendung von let verhindert Hoisting-Probleme und Variablenlecks in Schleifen oder Bedingungen.

Question 2

Was ist JSX in React?

Accepted Answer

JSX ist eine JavaScript-Syntaxerweiterung, die es ermöglicht, HTML-ähnliches Markup direkt im JavaScript-Code zu schreiben. Es wird während der Kompilierung von Babel in React.createElement-Funktionsaufrufe umgewandelt. Die Verwendung von JSX macht den Code lesbarer und ermöglicht die Fehlererkennung zur Kompilierungszeit durch Typisierung, während es die Stärke von JavaScript mit einer vertrauten Syntax verbindet.

Question 3

Was ist der useState-Hook in React?

Accepted Answer

useState ist ein React-Hook, der den lokalen State in einer Funktionskomponente verwaltet. Im Gegensatz zu regulären JavaScript-Variablen, die bei jedem Rendering zurückgesetzt werden, bewahrt useState den State-Wert zwischen aufeinanderfolgenden Renderings. Dieser Hook gibt ein Array zurück, das den aktuellen State-Wert und eine Funktion zum Aktualisieren enthält, und löst automatisch ein erneutes Rendering der Komponente aus, wenn sich der State ändert.

Question 4

Was ist Mounting in einer React-Komponente?

Accepted Answer

Mounting ist die Phase, in der eine Komponente erstellt und zum ersten Mal in den DOM eingefügt wird. Während dieser Phase initialisiert React den State, führt den Konstruktionscode aus und führt das erste Rendering durch. Dies ist der ideale Zeitpunkt, um API-Aufrufe auszulösen oder Abonnements über useEffect zu initialisieren.

Question 5

Was ist ein CSS Module in React?

Accepted Answer

CSS Modules generieren automatisch eindeutige Klassennamen, indem sie dem Klassennamen einen Hash hinzufügen, was Style-Konflikte zwischen Komponenten verhindert. Jede CSS Module-Datei hat ihren eigenen lokalen Scope, im Gegensatz zu traditionellen globalen Stylesheets. Dieser Ansatz ermöglicht das Schreiben modularer Styles ohne das Risiko versehentlicher Überschreibungen in anderen Komponenten.

Question 6

Was ist der App Router in Next.js?

Accepted Answer

Der App Router ist das neue Routing-System in Next.js 13+ basierend auf dem app/-Verzeichnis. Er ersetzt den Pages Router und führt standardmäßig Server Components, gemeinsame Layouts und ein flexibleres Routing-Modell mit Dateikonventionen wie page.tsx, layout.tsx und loading.tsx ein.

Question 7

Was ist die korrekte Syntax zum Typisieren von React-Komponenten-Props?

Accepted Answer

Das Props-Interface gefolgt von der Typisierung der Funktion mit Props als Parameter ist die empfohlene Standardsyntax. Dieser Ansatz bietet hervorragende Typinferenz und ermöglicht eine einfache Wiederverwendung des Props-Typs an anderer Stelle im Code. Er ist expliziter als React.FC und ermöglicht eine bessere Kontrolle über die Typisierung der children.

Question 8

Was ist die Hauptaufgabe von React.memo?

Accepted Answer

React.memo ist ein Higher-Order Component, das das Render-Ergebnis eines Komponenten memoisiert. Es führt einen flachen Vergleich der Props durch und überspringt das Re-Rendering, wenn sich die Props nicht geändert haben. Besonders nützlich zur Optimierung teurer Kindkomponenten, die häufig dieselben Props erhalten.

Question 9

Was ist eine Error Boundary in React?

Accepted Answer

Eine Error Boundary ist eine React-Klassenkomponente, die JavaScript-Fehler im Kindkomponentenbaum abfängt, eine Fallback-UI anzeigt und verhindert, dass die gesamte Anwendung abstürzt. Sie verwendet die Methoden componentDidCatch() und getDerivedStateFromError(), um Rendering-Fehler abzufangen und zu behandeln.

Question 10

Was ist das Compound Components Pattern?

Accepted Answer

Das Compound Components Pattern ermöglicht die Erstellung von Komponenten, die impliziten Zustand über React Context teilen, ohne Props explizit zu übergeben. Dieses Pattern wird in Bibliotheken wie Radix UI und Headless UI verwendet, um eine flexible und kombinierbare API bereitzustellen. Kindkomponenten können automatisch auf den geteilten Zustand zugreifen, was die Strukturanpassung ermöglicht, ohne die gemeinsame Logik zu verlieren.

React / Next.js Interview-Fragen

Bereit für dein React / Next.js-Interview?

Alle React / Next.js-Themen entdecken

JavaScript-Grundlagen

React-Grundlagen

React Hooks

Komponentenlebenszyklus

React Router

Zustandsverwaltung mit Context

Formulare & Controlled Components

Datenabruf & API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js Grundlagen

TypeScript mit React

Next.js Data Fetching

Next.js Server Actions

Routing & Navigation in Next.js

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware & Auth

React Testing

Zustand State Management

React Performance-Optimierung

Error Boundaries & Error Handling

Advanced React Patterns

Erweiterte Next.js-Funktionen

Next.js Deployment & Produktion

Architecture & Design Patterns

React Server Components

Next.js Internationalisierung

React Sicherheit & Best Practices

Meistere React / Next.js für dein nächstes Interview