Reactの面接でよく聞かれる60の質問を、簡潔で正確な回答とコード付きで紹介します。基礎、フック、状態、レンダリングとパフォーマンス、設計パターン、Server Components と React 19、テストまで。トピックとレベルで絞り込めます。
この60のReact面接質問は、面接で最もよく聞かれる内容を網羅しています。JSX、props と state、useState や useEffect などのフック、key、レンダリングと memo、コンテキスト、エラーバウンダリー、Server Components、useActionState などの React 19 の新機能です。それぞれにわかりやすい言葉での短い回答があり、多くにはコードも付いています。トピックとレベルで絞り込むこともできます。
質問の内訳
フィルターを使って1つの分野を集中的に練習しましょう。回答を開くのは、自分の答えを声に出して言ってからにしてください。コードのサンプルは、面接官にその場で書くよう求められそうなものとして読んでください。
state と props、フック（特に useEffect とその依存配列）、リストの key、再レンダリングとメモ化、コンテキスト、データ取得です。シニア職では、パフォーマンスのプロファイリング、アーキテクチャ、Server Components も加わります。
必要性はどんどん下がっています。新しいコードでは関数コンポーネントとフックを使います。それでも、古いコードを読むときにライフサイクルメソッドがわかると役に立ちますし、エラーバウンダリーは今でもクラスで書かれます。
小さなものをゼロから作りましょう。ToDoリスト、デバウンスした取得処理付きの検索ボックス、フォーカス管理付きのモーダルなどです。コードを書きながら説明し、空のリストやエラーなどの境界ケースをテストしましょう。
少なくとも知っているかどうかのレベルでは、増えてきています。prop としての ref、useActionState を使ったアクション、useOptimistic、use API、Server Components です。
再レンダリングに自信がないなら、回数をライブで数えるこちらのページで確認しましょう：
コンポーネントを組み合わせてユーザーインターフェースを作るためのJavaScriptライブラリです。現在のデータに対して画面がどう見えるべきかを記述すると、データが変わったときに React がページを更新します。
JavaScriptの中に書く、HTMLのような構文です。ビルド工程で各タグが React 要素を作る関数呼び出しに変換されるため、波かっこの中では任意のJavaScriptの式を使えます。
props を受け取って JSX を返す関数です。React がHTMLタグと区別できるよう、名前は大文字で始めます。
親が子コンポーネントに渡す入力で、HTMLタグの属性のようなものです。コンポーネントは自分の props を変更してはいけません。親が再レンダリングされたときに新しい props を受け取ります。
props は親から渡され、コンポーネント内では読み取り専用です。state はコンポーネント自身のもので、セッターを通じて時間とともに変化し、変化すると再レンダリングが発生します。
key は、レンダリングの間でどの項目がどれなのかを React に伝えます。そのため、リストの並べ替え、絞り込み、追加が起きても、各項目に正しい状態とDOMノードを対応させ続けられます。順序が変わる可能性がある場合は、配列のインデックスではなく、データにある変わらない ID を使いましょう。
普通のJavaScriptを使います。return の前の if、JSX 内の三項演算子、表示するか何も出さないかの場合は && です。&& と数値の組み合わせには注意しましょう。0 && <X /> は 0 をレンダリングします。
DOMノードを追加せずに複数の要素をまとめるラッパーです。<>...</> と書くか、リスト内でグループに key が必要な場合は <Fragment key={...}> と書きます。
onClick などのキャメルケースの prop に関数を渡します。React はブラウザーのイベントと同じように振る舞う合成イベントを渡します。関数を呼び出した結果ではなく、関数そのものを渡しましょう。
React がレンダリングのたびに作る、単純なオブジェクトで表したUIの記述です。React は新しい記述と前回の記述を比べ、差分だけを実際のDOMに反映します。この比較はリコンシリエーション（差分検出）と呼ばれます。
コンポーネントに状態と、それを更新する関数を与えます。セッターを呼ぶと新しい値での再レンダリングが予約されますが、現在のレンダリング内の変数は変わりません。
次の値が前の値に依存する場合、特に1つのイベントで複数回更新する場合に使います。更新関数はそれぞれキューに入った最新の値を受け取りますが、setCount(count + 1) を2回呼ぶと、2回とも同じ古い count が使われます。
レンダリング後に React の外部にあるものと同期するためです。購読、タイマー、React 以外のウィジェット、ネットワークリクエストなどです。依存配列はいつ再実行するかを指定し、返した関数がクリーンアップを行います。
props や state から値を計算するとき（代わりにレンダリング中に計算します）や、ユーザーのイベントに反応するとき（イベントハンドラーの中で処理します）です。エフェクトは外部のシステムと同期するためのものです。
フックはコンポーネントかカスタムフックのトップレベルでのみ呼び出し、ループ、条件分岐、入れ子の関数の中では決して呼ばず、React の関数からのみ呼び出します。React は、呼び出しの順序が毎回のレンダリングで同じであることを前提にしています。
レンダリングをまたいで保持され、変更しても再レンダリングを起こさない値を持つためです。DOMノード、タイマーの ID、前回の値などです。ref.current を通じて読み書きします。
useMemo は計算結果をキャッシュし、useCallback は関数をキャッシュします。どちらも依存する値が変わるまで同じものを返し、主にメモ化された子に値を渡すときに意味を持ちます。
ツリーの上位で提供された値を、すべての階層に props を渡さずに読み取る方法です。コンテキストを読み取るコンポーネントはすべて、その値が変わると再レンダリングされます。
複数の値が一緒に変わる場合や、フォームのウィザードやカートのように次の状態がアクションの種類に依存する場合です。reducer を使うと、すべての状態遷移をテストしやすい1つの関数にまとめられます。
名前が use で始まり、ほかのフックを呼び出す関数です。状態を持つロジックをコンポーネント間で共有できます。呼び出した各コンポーネントは、それぞれ独自の状態を持ちます。
React がDOMを変更した後、ブラウザーが描画する前に実行されます。そのため、目に見えるちらつきなしにレイアウトを測定して調整できます。描画をブロックするので、その用途にだけ使いましょう。
サーバーとクライアントのレンダリングで一致する一意の ID を生成するためです。ラベル、入力欄、説明文を関連付けるのに使います。リストの key に使うものではありません。
共有する状態を、それを必要とするコンポーネントに最も近い共通の親へ移し、変更用の関数と一緒に props として下に渡すことです。
React は古い値と新しい値を比べて再レンダリングするかを決めます。オブジェクトや配列をその場で変更すると参照が同じままなので、React が更新をスキップすることがあります。代わりに新しいコピーを作りましょう。
制御された入力は値を state から受け取り、変更を onChange で伝えます。制御されていない入力は値をDOM自身に保持し、ref やフォームの送信を通じて読み取ります。
絞り込まれたリストのように、既存の props や state から計算できる値です。別に保存すると2つのコピーを同期させ続ける必要がありますが、レンダリング中に計算すれば食い違うことはありません。
深い位置にある子に届けるためだけに、それを使わないコンポーネントを経由して props を渡すことです。解決策には、コンポジション（children を渡す）、コンテキスト、本当にグローバルなデータなら状態管理ライブラリがあります。
離れた場所にある多くのコンポーネントが同じクライアントの状態を読み書きし、コンテキストでは再レンダリングが多くなりすぎる場合や、開発ツールやミドルウェアなどが必要な場合です。サーバーのデータは通常、キャッシュしてくれるデータ取得ライブラリで扱うほうが適しています。
Server Components に対応したフレームワークなら、サーバーで取得します。クライアントでは、データライブラリを使うか、リクエストを開始し、読み込み中とエラーを扱い、コンポーネントがアンマウントされたり入力が変わったりした場合は結果を無視するエフェクトを使います。
いいえ。更新はキューに入れられ、まとめて処理されます。React 18 以降では、イベントハンドラーだけでなく、タイムアウトや Promise からの更新もまとめて処理されます。新しい値は次のレンダリングで反映されます。
自身の状態が変わったとき、親が再レンダリングされたとき、読み取っているコンテキストが変わったときです。再レンダリングが常にDOMを変えるわけではなく、React は異なる部分だけを更新します。
props が前回と浅い比較で等しい場合に、コンポーネントの再レンダリングをスキップします。効果があるのは、同じ props で頻繁にレンダリングされ、しかもレンダリングの負荷が軽くないコンポーネントだけです。
開発時にだけ追加のチェックを行うラッパーです。副作用やクリーンアップの漏れをあぶり出すため、コンポーネントのレンダリングとエフェクトの実行を2回行います。本番環境では何もしません。
本番ビルドで React DevTools の Profiler を使って操作を記録し、頻繁にレンダリングされるものや時間がかかるものを探します。そのうえで原因を直します。状態を下に移す、メモ化する、長いリストを仮想化する、などです。
更新を緊急ではないものとして示す方法です。React は入力の応答性を保ち、遅いレンダリングを中断できます。isPending を使えば処理中であることを表示できます。
重いレンダリングの間は遅れて追従することがある、値のコピーを返します。入力欄は打った文字がすぐに反映され、負荷の高いリストは遅延された値でレンダリングされます。
仮想化します。react-window や TanStack Virtual などのライブラリを使い、表示範囲の行だけをレンダリングします。ページ分割やスクロール時の追加読み込みでも、DOMノードの数を抑えられます。
アプリの一部を必要になったときだけ読み込むことです。動的インポートと Suspense のフォールバックを組み合わせた React.lazy で、コンポーネントを別のファイルに分割できます。
サーバーでレンダリングされたHTMLに React を結び付け、既存のマークアップを作り直すことなくインタラクティブにすることです。クライアントで異なる内容がレンダリングされると、React はハイドレーションの不一致を報告します。
ビルド時にコンポーネントを解析して自動でメモ化を追加するツールです。そのため、手で書いていた useMemo、useCallback、memo の多くが不要になります。React のルールに従ったコードであることが前提です。
コンポーネントの中に別のコンポーネントを入れて組み立てる方法で、多くの場合 children やほかの props を通じて行います。React のコンポーネントはコンポジションとフックで振る舞いを共有しており、React チームは継承の階層が役立つケースを見つけていません。
コンポーネントの開始タグと終了タグの間に置いたものです。レイアウトやラッパーのコンポーネントが、自分の知らない内容をレンダリングできるようになります。
コンポーネントを受け取り、追加の振る舞いを持つ新しいコンポーネントを返す関数です。ラップしたり props の名前を変えたりせずにロジックを共有できるため、ほとんどの用途はカスタムフックに置き換えられました。
子のレンダリング中に投げられたエラーを捕捉し、真っ白なページの代わりにフォールバックを表示するコンポーネントです。今でも getDerivedStateFromError を使ったクラスとして書くか、小さなライブラリを使います。
createPortal を使って、子を document.body などの別のDOMノードにレンダリングすることです。親の overflow や重なり順から抜け出す必要があるモーダルやツールチップに使います。
React 19 では、関数コンポーネントは ref を通常の prop として受け取れます。それ以前のバージョンでは、子を forwardRef で囲みます。特定のメソッドだけを公開するには useImperativeHandle を使います。
連携して動作し、コンテキストを通じて状態を共有するコンポーネントのまとまりです。たとえば Tabs と Tabs.List、Tabs.Panel です。利用者が部品を配置し、親がロジックを管理します。
サーバーでのみ実行され、コードではなくレンダリング結果をブラウザーに送るコンポーネントです。データを直接読み取れます。インタラクティブな部分は "use client" を付けた Client Components に置きます。
ファイルがクライアントコードの始まりであることを示します。そのモジュールとそこからインポートされるものはブラウザー向けにバンドルされ、状態、エフェクト、イベントハンドラーを使えます。
サーバーで実行されるものの、クライアントから呼び出せる非同期関数で、多くはフォームの action として使われます。それぞれを公開エンドポイントとして扱い、入力を検証して権限を確認しましょう。
アクション関数をラップし、最新の結果、フォームに渡すためのラップされたアクション、保留中フラグを返します。React 19 でフォームのフィードバックを表示する方法です。
レンダリング中に Promise やコンテキストの値を読み取る React 19 の API です。フックと違って条件分岐の中でも呼び出せます。Promise を渡すと、値が準備できるまでサスペンドします。
新しいコメントなど、アクションの予想される結果をリクエストの実行中にすぐ表示し、リクエストが戻ってきたら実際の結果に落ち着かせます。
遅延読み込みされるコードや、対応したフレームワークでのデータなど、内部の何かが準備できていない間はフォールバックを表示するコンポーネントです。サーバーレンダリングと組み合わせると、ページの一部を後からストリーミングできます。
Vitest や Jest などのテストランナーで React Testing Library を使ってレンダリングし、ユーザーと同じように操作（クリック、入力）し、内部の状態ではなく画面に見えるものを検証します。
getByRole("button", { name: "Save" }) のようなクエリは、支援技術と同じ方法で要素を見つけます。そのため、テストでUIがアクセシブルかどうかも確認でき、マークアップの変更にも強くなります。
React のドキュメントでは、本格的なアプリなら Next.js や React Router などのフレームワークから始めることを推奨しています。クライアントだけのアプリなら、Vite がよく使われるビルドツールです。
セマンティックなHTML要素を使い、すべての入力欄にラベルを付け、ダイアログ内のフォーカスを管理し、クリックできるものはすべてキーボードでも操作できるようにし、スクリーンリーダーと自動チェックツールでテストします。
サーバーレンダリング、静的生成、プリレンダリングのいずれかで各URLに本物のHTMLを配信し、すべてのルートに固有のタイトルとメタディスクリプションを付け、URLをサイトマップに掲載します。
リストの key が正しいこと、エフェクトの依存配列が完全でクリーンアップがあること、派生できる状態を保存していないこと、アクセシブルなマークアップ、エラーと読み込み中の状態、クライアントのコードに秘密情報がないことです。
すべて
初級
中級
上級
トピック
レベル
検索
effect, key, memo...
{total}問中 {shown}問
無料で始める · クレジットカード不要