
React Query (TanStack Query)
useQuery, useMutation, Invalidation, Cache, Refetch, Lade-/Fehlerzustände, optimistic updates, query keys, Paginierung
1Was ist die Hauptaufgabe von useQuery in React Query?
Was ist die Hauptaufgabe von useQuery in React Query?
Antwort
useQuery ist der grundlegende Hook zum Abrufen von schreibgeschützten Daten aus einer API oder Datenquelle. Er verwaltet automatisch Cache, Ladezustände, Fehler und Refetch-Strategien. Im Gegensatz zu useEffect mit fetch optimiert useQuery die Performance, indem redundante Anfragen durch sein intelligentes Cache-System vermieden werden.
2Welcher Hook sollte verwendet werden, um eine POST-Mutation an eine API durchzuführen?
Welcher Hook sollte verwendet werden, um eine POST-Mutation an eine API durchzuführen?
Antwort
useMutation ist der dedizierte Hook für Schreiboperationen wie POST, PUT, PATCH oder DELETE. Er bietet onSuccess-, onError- und onMutate-Callbacks zur Verwaltung des Mutation-Lebenszyklus. Im Gegensatz zu useQuery, das für Lesevorgänge gedacht ist, löst useMutation die Anfrage nicht automatisch aus und erfordert einen expliziten Aufruf der mutate-Funktion.
3Wozu dient der query key in React Query?
Wozu dient der query key in React Query?
Antwort
Der query key ist ein eindeutiger Bezeichner, der es React Query ermöglicht, Cache und Abhängigkeiten zwischen Abfragen zu verwalten. Er dient dazu, bestimmte Abfragen zu identifizieren, zu invalidieren und erneut zu fetchen. Ein query key kann ein einfacher String oder ein Array mit dynamischen Parametern sein. Das Ändern des query key löst automatisch einen neuen Fetch aus, was eine deklarative Verwaltung von Abhängigkeiten ermöglicht.
Was bedeutet staleTime in der useQuery-Konfiguration?
Welche Eigenschaft zeigt an, dass useQuery lädt?
+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
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
Zugang zu allen Fragen, Flashcards, technischen Tests, Code-Review-Übungen und Interview-Simulatoren.
Kostenlos starten