Reactの面接でよく聞かれる質問

Reactの範囲は非常に広く、多くの質問リストはすべての領域を同じ確率で扱っているように見せています。しかし実際はそうではありません。このセクションでは、実際に多くの選考結果を左右する概念を扱うので、本当の出題分布に沿って練習できます。中心となるのは次の4つです。

• Hooksの仕組み：hooksのルール、useEffectの依存配列に何を入れるか、クリーンアップ関数、そしてeffectやコールバックが古いstateの値を参照してしまう古いクロージャのバグ。
• レンダリング：何が再レンダリングを引き起こすか、差分検出（reconciliation）がツリーをどう比較するか、そしてリストで安定したkeyが重要な理由。
• 状態設計：状態のリフトアップ、制御コンポーネントと非制御コンポーネントの違い、そしてcontextと外部ストアのどちらが適するか。
• パフォーマンス：React.memo、useMemo、useCallback、そしてそれぞれがいつノイズになり、いつ役立つか。

面接官はそれぞれの「なぜ」を掘り下げてきます。keyは一意でなければならないと暗唱するだけでは点数になりません。リストの並び替え時にReactがkeyをどう使うかを説明できるかが問われます。

ほとんどのReact選考では、その場で小さなコンポーネントを組み立てる課題が含まれます。繰り返し出題される課題は会社をまたいでほぼ一定です。

• APIからリストを取得し、描画して、テキストフィルターを追加する。
• 検索入力にデバウンスを追加し、古くなったリクエストをキャンセルする。
• バリデーション付きのフォームを、制御された入力で構築する。
• effectを正しくクリーンアップするカウンターやタイマーを書く。
• 繰り返されるロジックからカスタムhookを抽出する。

例えば、ミドルレベルのプロダクト職に応募するフロントエンドエンジニアなら、データ取得とフィルタリングのリストを組み立てたあと、ローディング状態、エラー状態、そしてリクエスト中にコンポーネントがアンマウントされた場合の挙動を突っ込まれることになります。選考の勝敗を分けるのはこうした発展部分であり、基本課題自体は前提条件にすぎません。

タイムプレッシャーの中でフォローアップを受けながら繰り返し練習することで、これらは自然に身につきます。模擬面接のページでは、面接官が突っ込んでくる時間制限付きセッションの進め方を扱っています。

シニア向けの選考では、仕組みの理解から判断力へと重心が移ります。状態アーキテクチャに関する質問が出ます。何をコンポーネントのstateに置き、何をストアに置くか、サーバーの状態とUIの状態はどう違うか、そしてキャッシュはどの層に置くか、といった内容です。レンダリングパフォーマンスの質問はより具体的になり、遅い操作の原因の特定、メモ化と再構築のどちらを選ぶか、そしてプロファイラーのフレームグラフの読み方が問われます。

チームがReactの上にフレームワークを使っている場合は、サーバーサイドレンダリングとハイドレーションも登場します。ハイドレーションとは何か、なぜ不一致が起きるのか、そして処理をサーバーに移すことで何が得られるのか、といった内容です。テストに関する質問は戦略が中心で、コンポーネント単位のテストとエンドツーエンドのテストで何をテストすべきかが、特定のライブラリのAPIより重視されます。

面接形式や、フロントエンドの選考が一般的にこれらのラウンドをどう組み立てるかについては、面接タイプのハブで扱っています。

チュートリアルを見るだけでは「見覚えがある」状態にしかならず、「思い出せる」状態にはなりません。そして選考で試されるのは、人に見られながら思い出せるかどうかです。有効な対策は、選考本番と同じ形で繰り返すことです。空のファイルから定番課題を組み立て、書きながら考えを説明し、割り込みの質問を受けても筋道を見失わないようにします。React選考が今でも導入として使う素のJavaScriptの基礎を含め、隣接スタックの問題集は問題集ハブにあります。

正直に言うと、React面接はほぼ常に共有エディタで行われるか、画面自体が見えている状態で行われ、その画面に映るものはすべて面接官に見えます。アシスタントは準備と練習の段階で使うべきもので、画面共有中の本番選考そのもので使うものではありません。正当なライブ利用のために、SubcueAIのオーバーレイは常にローカルのマシン内だけで動作し、通話にボットが参加することもありません。練習セッションのセットアップはチュートリアルページにあります。