ガイド
REACT INTERVIEW Qs
React開発者を採用する際の技術面接で使える質問と模範回答。Hooks、パフォーマンス、状態管理、Server Componentsなどを網羅。
最終更新：2026年5月
useEffectとuseLayoutEffectの違いを説明してください
useEffectはブラウザのペイント後に非同期で実行され、副作用（データ取得、サブスクリプション）に使います。useLayoutEffectはブラウザのペイント前に同期的に実行され、DOMの計測や同期的なレイアウト更新が必要な場合に使います。パフォーマンスへの影響が大きいため、useLayoutEffectは本当に必要な場合のみ使用すべきです。
Reactのレンダリングを最適化する方法を教えてください
React.memoでコンポーネントの不要な再レンダリングを防止、useMemoで計算コストの高い値をキャッシュ、useCallbackでコールバック参照を安定化します。さらに、仮想リスト（react-window）、コード分割（React.lazy + Suspense）、状態管理の適切なスコーピング（ローカルステートの優先）も重要です。
Server ComponentsとClient Componentsの違いは何ですか？
Server Componentsはサーバー上でレンダリングされ、JavaScriptバンドルに含まれません。データベースやファイルシステムに直接アクセスでき、初期ページロードを高速化します。Client Componentsはブラウザでハイドレーションされ、useStateやuseEffectなどのブラウザAPIにアクセスできます。Next.js App RouterではデフォルトがServer Componentです。
ZustandとReduxの違いを説明してください
Zustandはミニマルな状態管理ライブラリで、ボイラープレートが少なく、フックベースのAPIが直感的です。Context不要でどこからでもストアにアクセスできます。Reduxは予測可能な状態更新と強力なDevToolsが強みですが、ボイラープレートが多く、学習コストが高いです。小〜中規模プロジェクトではZustand、大規模エンタープライズではRedux Toolkitが推奨されます。
Custom Hookを使うメリットは何ですか？
Custom Hookにより、コンポーネント間でロジックを再利用できます。データ取得、フォーム処理、ブラウザAPIのラッピングなどを抽象化し、コンポーネントはUIレンダリングに集中できます。名前付き関数としてテストしやすく、複数のコンポーネントで同じ振る舞いを保証できます。
Concurrent FeaturesがReactアプリに与える影響は何ですか？
React 18のConcurrent Featuresにより、レンダリングを中断・優先付け・再開できます。useTransitionで非緊急の更新を遅延させ、useDeferredValueで高頻度の入力に対してUIをスムーズに保てます。大規模アプリでのUXを劇的に改善しますが、副作用の実行順序に注意が必要です。
お問い合わせ