Advanced React Patterns
Compound Components, Render Props, HOC, Custom Hooks patterns, Controlled/Uncontrolled, Provider, State Reducer, Props Getters
1Was ist das Compound Components Pattern?
Was ist das Compound Components Pattern?
Antwort
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.
2Was ist das Prinzip des Render Props Patterns?
Was ist das Prinzip des Render Props Patterns?
Antwort
Das Render Props Pattern besteht darin, eine Funktion als Prop zu übergeben, die ein React-Element zurückgibt, und ermöglicht so der Elternkomponente, ihre Logik mit der Kindkomponente zu teilen. Diese Funktion empfängt Daten oder Methoden des Elternteils als Parameter. Dieses Pattern war vor der Einführung von Hooks sehr beliebt, insbesondere mit Bibliotheken wie React Router und Downshift.
3Was sind Higher-Order Components (HOC)?
Was sind Higher-Order Components (HOC)?
Antwort
Higher-Order Components sind Funktionen, die eine Komponente als Parameter nehmen und eine neue Komponente zurückgeben, die mit zusätzlichen Props oder Verhaltensweisen angereichert ist. Dieses Pattern ermöglicht die Wiederverwendung von Logik zwischen Komponenten ohne Code-Duplikation. HOCs werden für querschnittliche Belange wie Authentifizierung, Tracking oder Berechtigungsverwaltung eingesetzt.
Was ist der Unterschied zwischen einer kontrollierten und unkontrollierten Komponente?
Was ist das Provider Pattern?
+17 Interview-Fragen
Weitere React / Next.js-Interviewthemen
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
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
Zugang zu allen Fragen, Flashcards, technischen Tests, Code-Review-Übungen und Interview-Simulatoren.
Kostenlos starten