React Query (TanStack Query)
useQuery, useMutation, invalidation, cache, refetch, loading/error states, optimistic updates, query keys, ページネーション
20 面接問題·
Mid-Level
1React QueryにおけるuseQueryの主な役割は何ですか？
1
React QueryにおけるuseQueryの主な役割は何ですか？
回答
useQueryは、APIやデータソースから読み取り専用のデータを取得するための基本的なhookです。cache、ローディング状態、エラー、refetch戦略を自動的に管理します。useEffectとfetchの組み合わせとは異なり、useQueryはインテリジェントなcacheシステムにより冗長なリクエストを回避してパフォーマンスを最適化します。
2APIへのPOST mutationを実行するにはどのhookを使うべきですか？
2
APIへのPOST mutationを実行するにはどのhookを使うべきですか？
回答
useMutationは、POST、PUT、PATCHまたはDELETEなどの書き込み操作専用のhookです。mutationのライフサイクルを管理するために、onSuccess、onError、onMutateコールバックを提供します。読み取り用のuseQueryとは異なり、useMutationはリクエストを自動的にトリガーせず、mutate関数への明示的な呼び出しが必要です。
3React Queryにおけるquery keyの目的は何ですか？
3
React Queryにおけるquery keyの目的は何ですか？
回答
query keyはReact Queryがcacheとクエリ間の依存関係を管理するためのユニークな識別子です。特定のクエリの識別、invalidate、refetchに使用されます。query keyは単純なstringまたは動的パラメータを含む配列にできます。query keyを変更すると自動的に新しいfetchがトリガーされ、宣言的に依存関係を管理できます。
4
useQueryの設定におけるstaleTimeは何を表しますか？
5
useQueryがローディング中であることを示すプロパティはどれですか？
+17 面接問題
その他のReact / Next.js面接トピック
JavaScript の基礎
Junior
25問React の基礎
Junior
20問React Hooks
Junior
22問コンポーネントのライフサイクル
Junior
18問React Router
Junior
20問Contextを使った状態管理
Junior
18問フォームと Controlled Components
Mid-Level
20問データ取得と API
Mid-Level
20問Styling & CSS-in-JS
Mid-Level
18問Next.jsの基礎
Mid-Level
25問TypeScriptとReact
Mid-Level
20問Next.js データフェッチング
Mid-Level
24問Next.js Server Actions
Mid-Level
20問Next.jsのルーティングとナビゲーション
Mid-Level
22問Next.js API Routes
Mid-Level
20問Next.js Metadata & SEO
Mid-Level
18問Next.js の Middleware と Auth
Mid-Level
22問React テスト
Mid-Level
20問Zustand State Management
Mid-Level
18問React パフォーマンス最適化
Senior
22問Error Boundaries & エラーハンドリング
Senior
18問Advanced React Patterns
Senior
20問Next.jsの高度な機能
Senior
24問Next.jsのデプロイメントと本番環境
Senior
20問アーキテクチャ & デザインパターン
Senior
22問React Server Components
Senior
26問Next.js の国際化
Senior
20問React セキュリティ & ベストプラクティス
Senior
22問