React面接でよくある質問25選

さて、想像してみてください。Zoomコールに参加すると、カメラに3人の顔と「シニアReact開発者」と書かれた1つの黒い四角が表示されます。心臓はもうどこかかかとにあり、手は濡れていて、頭の中では「和解についてだけは聞かないでください」としか思っていません。

スポイラー： しかし、この記事を読んだ後は、トニー・スタークが最後の戦いに備えるように、準備ができます。

🔥 基本（なぜかみんな忘れてしまうもの）

1. Real DOMとVirtual DOMの違いは何ですか？

難易度： Array.sort ()が配列を変異させる理由を理解するよりも簡単です

簡単な回答： Real DOMは、ブラウザに実際に表示されるものです。朝の目覚めのように、重くて、ゆっくりと。仮想DOMは、軽くて速いJavaScriptのコピーです。Reactはそれらを差分を通じて比較し、変更されたものだけを更新します。

面接で言うべきこと： 「仮想DOMを使用すると、Reactは更新をバッチ処理し、調停アルゴリズムを使用してReal DOMとの高価な操作を最小限に抑えることができます。これは、Gitを使用するようなものです。最初にローカルでコミットし、すべての変更を一度にプッシュします。

2. JSXとは何ですか？なぜJavaScriptでHTMLを書くのですか？

難易度：ミームとは何かをおばあちゃんに説明する方法

JSXはReact.createElement()の上の構文の砂糖です。JSXがなければ、コードは地獄のJSONのように見えます。

// JSXを使用（美しく、美しい）
<div className="hot">
  <h1>Привет, мир!</h1>
</div>

// JSXなし（2013年へようこそ）
React.createElement('div', {className: 'hot'},
  React.createElement('h1', null, 'Hello, world!')
)

3. Functional vs Class Components — クラスにまだ意味がありますか？

難易度：ピザとシャワルマのどちらが良いのか議論する方法

フックを備えた機能コンポーネントが勝ちました。クラスはレガシープロジェクトの恐竜のように残っています。しかし、面接ではcomponentDidMountについて尋ねられるかもしれません。準備してください。

4. useStateを説明してください。ただし、面白く説明してください。

const [coffee, setCoffee] = useState('no 😭');

// コードを数行書くと...
setCoffee('Yes! ☕');

それはシュレーディンガーの猫の箱のようなものですが、中に何が入っているかは常にわかります。

5. useEffect — 依存関係の配列が必要な理由は？

難易度：効果が1000回起動する理由を理解する

「useEffectで無限ループが発生しています。助けてください！」

// ❌ 無限の地獄
useEffect(() => {
  setCount(count + 1); // 無限へのもう一枚のチケット
});

// ✅ 管理された混乱
useEffect(() => {
  fetchData();
}, []); // 空の配列＝マウント時に1回

ルール： useEffect内で変数を使用する場合は、依存関係に追加します。ESLintは無駄に怒っていません。

6. useMemoとuseCallbackの違いは何ですか？

難易度：同じTシャツ2枚からどちらを選ぶか

• useMemo はメモリに格納します 値 （計算結果）

• useCallback は、 機能

const expensiveValue = useMemo(() => {
  return calculatePi(1000000); // 一度計算します
}, []);

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]); // 関数は、IDが変更されたときにのみ再作成されます

7. useRef — DOMにアクセスするためだけではありません

これはジャケットのポケットのようなもので、何でも入れることができ、レンダリングを再度行う必要はありません。

const renderCount = useRef(0);

useEffect(() => {
  renderCount.current += 1; // レンダリングは再度行われません！
});

8. 条件付きでフックを呼び出すことはできますか？

いいえ。絶対に。忘れてください。

// ❌ これはバグにつながります
if (condition) {
  useState(0); // React: "Am I a joke to you?"
}

// ✅ 正解
const [state, setState] = useState(0);
if (condition) {
  // ここでは state を使用します
}

🎭 進歩したコンセプト（痛みが始まるところ）

9. 調停とは何ですか？Fiberはどのように機能しますか？

難易度：ミームを通して量子物理学を説明する

Reconciliationは、Virtual DOMを比較するプロセスです。Fiberは、このプロセスをReact 16+で新たに実装したもので、作業を中断して再開することができます（ゲームのセーブのように）。

10. リストのキー — なぜインデックスが悪いのか？

// ❌ インタビュアーは首を振る
{items.map((item, index) => 
  <div key={index}>{item}</div>
)}

// ✅ インタビュアーは敬意を込めてうなずく
{items.map(item => 
  <div key={item.id}>{item}</div>
)}

インデックスをキーとして使用すると、要素を並べ替えるときにバグが発生する可能性があります。Reactは、これらが新しいデータを持つ同じ要素であると考えます。

11. Context API — いつ使用し、いつReduxに移動するか？

シンプルなもの（テーマ、言語、ユーザー）のコンテキスト。状態のロジックが複雑な場合は、ReduxまたはZustandが役立ちます。

12. 高次コンポーネント（HOC）—それらは生きていますか？

技術的にはそうですが、フックはほとんど埋められています。知る必要はありますが、使用する必要はありません。

// オールドスクールですが、聞かれるかもしれません
const withAuth = (Component) => {
  return (props) => {
    const isAuth = useAuth();
    return isAuth ? <Component {...props} /> : <Login />;
  };
};

13. Render Propsとは何か、そしてなぜ必要なのか？

フックの登場により、ほぼ絶滅したパターンです。

<DataProvider render={data => (
  <h1>Привет, {data.name}</h1>
)} />

⚡ 最適化（すべてがスムーズに動くように）

14. React.memo — いつ適用しますか？

コンポーネントのメモリ化。不要な再レンダリングを防ぎます。

const ExpensiveComponent = React.memo(({ data }) => {
  // データが変更された場合にのみレンダリングされます
  return <div>{/* тяжёлые вычисления */}</div>;
});

15. Lazy loading と React.Suspense

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

<Suspense fallback={<Spinner />}>
  <HeavyComponent />
</Suspense>

ユーザーは満足し、バンドルは少なくなり、あなたは良い仕事をしました。

16. コード分割 — なぜ重要なのか？

サイトに初めてアクセスしたときに5MBのJavaScriptを読み込むことを望む人はいません。分割統治法。

🔄 データの状態と管理

17. 制御対非制御コンポーネント

Controlled: React は入力の状態を制御します（useState を介して）
Uncontrolled: DOMは値を自分で管理します（ refを介して）

// 制御された（正しい道）
const [value, setValue] = useState('');
<input value={value} onChange={e => setValue(e.target.value)} />

// Uncontrolled （怠け者向け）
const inputRef = useRef();
<input ref={inputRef} />

18. プロプ・ドリリング — 問題と解決策

コンポーネントの5つのレベルを介してプロパティをスローする場合。ソリューション：コンテキストAPI、Redux、コンポジション。

19. Lifting State Upとは何ですか？

複数のコンポーネントが使用できるように、状態を1つ上のレベルに上げます。

20. Redux vs MobX vs Zustand — どちらを選択しますか？

• Redux: ボイラープレートと厳格なアーキテクチャが好きな場合

• MobX: 魔法と反応性が好きな場合

• Zustand: シンプルさとミニマリズムが好きな場合

2025年、Zustandは新しいプロジェクトで人気を博します。

🧪 テスト

21. React Testing Library vs Enzyme

Enzyme は古くなっています。React Testing Library を使用してください。

import { render, screen } from '@testing-library/react';

test('button exists', () => {
  render(<Button />);
  expect(screen.getByRole('button')).toBeInTheDocument();
});

22.スナップショットテストとは何ですか？

コンポーネントの「スナップショット」を保存し、変更時に比較します。便利ですが、過大評価しないでください。

🚀 React 18+と未来

23. コンカレントレンダリング — 何が変わりましたか？

Reactはレンダリングを中断して再開できます。インターフェースのフリーズはもうありません。

24. 自動バッチ処理 — なぜ必要ですか？

React 18は、promiseやタイムアウトでも、すべての状態の更新を自動的にバッチ処理します。

25. useTransitionとuseDeferredValueは何のためですか？

緊急性の低い更新をマークし、より重要な更新を優先することができます。

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchQuery(input); // ユーザー入力をブロックしない
});

🎓 面接の準備はできていますか？実際の練習はどうですか？

理論を学ぶことは、イケアの説明書を読むようなものです。実際のスキルは、自分で家具を組み立てる（コードを書く）ときに身につきます。

そのために、私たちはコディックを作りました — Reactについて読むだけでなく、すぐに練習できるアプリケーション。各レッスンは、ブラウザで直接実行できるミニプロジェクトです。useStateから本番環境に対応したアプリケーションまで。

このコースの特徴は、理論をすぐに実践で固定できることです。タブを切り替えたり、コードを実行する場所を探したり、環境を設定したりする必要はありません。Kodikを開いて、コーディングを始めましょう。

また、当社には テレグラムチャンネル、毎日役立つ投稿が公開されます。コンセプトの分析、プログラミングに関するミーム、現在の求人情報、ライフハックなどがあります。これは毎日の脳トレーニングのようなものです。フィードをスクロールすると、脳が鍛えられます。

地下鉄で、寝る前、または昼休みに、資料を繰り返すのに最適です。プログラミングは楽しくなければなりません！

覚えておいてください：面接では、答えを知っているだけでなく、議論できることも重要です。知らない場合は、そう伝えてください。しかし、どのように答えを探すかを示してください。面接官は、すべてのAPIを暗記するよりも、正直さと学習能力を重視します。

面接がうまくいきますように！コンポーネントが常に効率的にレンダリングされ、バグが本番環境に到達する前に見つかることを願っています🚀