コンポーネントのライフサイクル
マウント、更新、アンマウント、useEffectのクリーンアップ、依存関係配列、ライフサイクルパターン
18 面接問題·
Junior
1Reactコンポーネントにおけるmountingとは何ですか？
1
Reactコンポーネントにおけるmountingとは何ですか？
回答
マウントは、コンポーネントが初めて作成されDOMに挿入される段階です。この段階では、Reactがstateを初期化し、構築コードを実行して最初のレンダリングを行います。useEffectを通じてAPIコールを起動したりサブスクリプションを初期化したりするのに最適なタイミングです。
2Reactコンポーネントにおけるunmountingとは何ですか？
2
Reactコンポーネントにおけるunmountingとは何ですか？
回答
アンマウントは、コンポーネントがDOMから削除されて破棄される段階です。この段階は、ルート変更やレンダリング条件など、コンポーネントが不要になったときに発生します。リソースをクリーンアップするための重要なタイミングです：タイマーのキャンセル、WebSocket接続のクローズ、メモリリーク防止のためのevent listenerの削除を行います。
3デフォルトではuseEffectに渡された関数はいつ実行されますか？
3
デフォルトではuseEffectに渡された関数はいつ実行されますか？
回答
デフォルトでは、useEffectはコンポーネントの最初のレンダリングを含む、すべてのレンダリング後に実行されます。この非同期実行によりユーザーインターフェースがブロックされません。この動作を制御するには、特定の値が変化したときのみ実行を制限するために、2番目の引数として依存関係配列を使用することができます。
4
useEffectにおける依存関係配列の目的は何ですか？
5
useEffectの依存関係として空の配列[]を渡すことは何を意味しますか？
+15 面接問題
その他のReact / Next.js面接トピック
JavaScript の基礎
Junior
25問React の基礎
Junior
20問React Hooks
Junior
22問React Router
Junior
20問Contextを使った状態管理
Junior
18問フォームと Controlled Components
Mid-Level
20問データ取得と API
Mid-Level
20問React Query (TanStack Query)
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問