プロの場合、Reactと言ってもNext.jsを示唆している場合が有るので要注意。
以外はAIによる解説の要約。
React / Next.js 経験 2〜3年クラスの中途採用でよく聞かれる技術的質問をカテゴリ別にまとめました。現場レベルで答えられるかが判断されるため、仕組み・理由・実例がセットで語れると強いです。
React でよく聞かれる質問
◆ 基礎理解
Virtual DOMとは？なぜ必要？
クラスコンポーネントと関数コンポーネントの違い
StateとPropsの違い
再レンダリングが発生するタイミングは？
◆ Hooks周り
useState / useEffectの正しい使い方と注意点
→ 無限ループが起きる理由、依存配列の扱い説明できるか
useMemo / useCallbackを使うシーン
カスタムフックを作った経験・構造
◆ パフォーマンス最適化
re-render抑制のテクニック（memo, useMemo, useCallback, key 適切管理）
コンポーネント分割の基準
大量リストのレンダリング最適化（react-window など）
◆ 状態管理
Redux / Recoil / Zustand / Jotaiなどの使用経験
グローバルステートとローカルステートをどう使い分ける？
Redux Toolkitのメリットは？
Next.js でよく聞かれる質問
◆ 基本概念
App Router と Pages Router の違い
Routingの仕組み（ファイルベース、動的ルーティング、キャッチオール）
Layout、Server Component / Client Component の切り分け
◆ データフェッチング
fetch / getServerSideProps / getStaticProps の違い
ISR（Incremental Static Regeneration）とは？
サーバーコンポーネントでのデータ取得の流れ
◆ パフォーマンス / 最適化
Image / Link コンポーネントのメリット
Pre-rendering、Code Splitting、Lazy Loading
TTFB改善、CLS/SEO対策の実務経験があるか
◆実装・経験ベースで深掘られる質問
実務でのトラブル対応
→ ビルドが重い、CSR/SSRの選択ミス、API遅延などをどう改善したか
大規模化への工夫
→ ディレクトリ構成、Atomic Design、コンポーネント設計をどうしたか
テスト周り
→ Jest / React Testing Library の経験、ユニットテスト対象の基準
API連携
→ fetch / axiOS の使い分け、エラー状態・ローディング状態の管理方法
◆よくある実際の質問例
「useEffectで依存配列に入れるべき値と入れなくてよい値の違いを説明してください」
「Next.jsでSSRとISRを使い分けた実例はありますか？」
「Server Component と Client Component の境界はどう判断しますか？」
「再レンダリングが発生しすぎた時、どのように対処しますか？」
「パフォーマンス改善を行った事例を具体的に教えてください」
上記はほぼ確実に飛んできます。
面接突破のポイント
用語説明だけでなく なぜそうするのか を語る
実案件での工夫・失敗と改善の話が最強
「Before → Problem → Action → Result」で話せると評価が高い
◆React / Next.js 面接でほぼ確実に聞かれるワード SSR と SPA。
SPA（Single Page Application）
概要
最初に1つのHTMLを読み込み、その後の画面遷移はJavaScriptで処理するアプリケーション方式。
ページリロードが発生せずUIが滑らか。
特徴
初回ロードはやや重いが、以降の遷移が高速
多くが CSR(Client Side Rendering) による描画
API通信はクライアント側で行う
UX重視のWebアプリで採用されやすい
メリット
体感速度が速い（スムーズな画面切り替え）
フロント側のロジックに柔軟性
SPAフレームワーク（React/Next.js等）との相性が良い
デメリット
初期表示遅延（JSダウンロードが必要）
SSRに比べSEOが弱い（コンテンツ描画が遅れるため）
SSR（Server Side Rendering）
概要
ページリクエストごとに サーバー側でHTMLを生成して返却 する方式。
Next.jsでのgetServerSidePropsやServer Componentが該当。
特徴
HTMLが最初から生成されるため初期表示が速い
検索エンジンがクロールしやすくSEOに強い
リクエストごとにサーバー側で最新データを取得可能
メリット
初期描画が速い（TTFB改善）
動的なデータをSEO有効な形で返せる
セッション情報を安全に扱いやすい
デメリット
毎回レンダリングが走るためサーバー負荷が増大
レイテンシの影響を受けやすい
キャッシュ戦略を考えないとパフォーマンス低下
◆React / Next.js エンジニアでもレスポンシブデザインはほぼ必須スキルです。特に2〜3年経験の中途なら確実に必要と見られます。
「レスポンシブが必要と見られる理由」
UI品質が成果(SEOスコア)に直結するため、マルチデバイス対応はフロントエンドの基本
PC / モバイル(スマホ、タブレット)のマルチデバイス対応が現代Webの標準のため
Next.js案件はWebアプリ中心でレスポンシブ設計が求められるため
Figma / XDデザインを実装レベルで再現する能力が評価対象になるため
◆以下はAIでは無い。
モバイル(タブレット、スマホ)端末のdp解像度
//z.wikiwiki.jp/bremen/topic/7
レスポンシブ・デザインによるSEOスコアの優位性
//z.wikiwiki.jp/bremen/topic/5
ザックリと言うと、レスポンシブ･デザインの注意点としては、「タグ内部のテキストと、それを囲うHTMLタグも」を冗長化してはならない。
分かり安く言うと、基本的に、PC用のタグ、タブレット用のタグ、スマホ用のように分けてはダメ。
下記は(超単純なレスポンシブ･デザインのデモです)レスポンシブ・デザインの場合は、とりあえずChromeモバイル･エミュレーターで一般的には約「300px～3000px」解像度ぐらいをチェックしてみると良いでしょう
コードは単純明快なので、コードを参照してみると良いでしょう、なおダウンロードすると(ブラウザ？によって)コードが改変されてしまう場合があるので、必ず開発者ツール(デベロッパー･ツール)で参照して下さい。
添付画像の左からPC画面のレイアウト構成、タブレット縦画面のレイアウト構成、スマホ縦画面のレイアウト構成
//ss1.xrea.com/sphinx1335.s329.xrea.com/responsive/001/index.htm
そのコードを見れば分かるように、概念自体は そんなに難しくは無いです(逆に簡単すぎて拍子抜けするかもしれませんけどね)。
もちろん、本格的なレイアウトだと、CSSの難易度は非常に高くなりますが、それは地道に勉強するしか無いですが。
