ウェブエンジニア問題集

React入門 — コンポーネントとHooks

UIライブラリReactの考え方から、JSX・コンポーネント・Hooksまでを、Next.jsなどのフレームワークに進む前の土台として整理する入門書です。クイズカテゴリ「React基礎」とあわせて、用語と典型パターンを身につけられます。

目次（全10章）

  1. 1
    Reactとは何か — UIを宣言的に組み立てる

    Reactの役割、SPAにおける位置づけ、コンポーネント指向のメリットを整理して、これからの章の土台を作ります。

  2. 2
    JSXとコンポーネント — 描画の仕組みからpropsまで

    JSXのルール、React（ReactDOM）がHTMLをエスケープする仕組み、dangerouslySetInnerHTMLとサニタイズ、props・childrenの基本パターンを整理します。

  3. 3
    レンダーとマウント — コンポーネントのライフサイクル入門

    レンダー・マウント・再レンダー・アンマウントの違いを整理し、Reactがコンポーネントをどのように生成・更新・破棄するかの流れを理解します。

  4. 4
    useState — stateの仕組みと参照の罠

    useStateの基本から、オブジェクトや配列をstateに持つときのイミュータブル更新、複数stateの設計判断までを整理します。

  5. 5
    useRef — 再レンダーの外で値を持つ

    useRefの仕組みとuseStateとの使い分け、DOM参照・前回値の記憶・タイマーIDの保持など典型パターンを整理します。

  6. 6
    useEffect — 副作用と外部同期

    useEffectの役割を「レンダー結果を外部と同期する」と定義し、依存配列・クリーンアップ・よくある誤用を丁寧に解説します。

  7. 7
    依存配列を正しく書く — exhaustive-depsの読み方

    ESLintのexhaustive-depsルールが何をチェックしているか、警告を無視するとどうなるか（stale closure）、正しい対処法を具体例で解説します。

  8. 8
    useMemo — 計算結果のメモ化

    useMemoの仕組みと、useEffect・useRefとの比較、使うべき場面と使わなくてよい場面の判断基準を整理します。

  9. 9
    useCallback — 関数のメモ化と子コンポーネント最適化

    useCallbackがuseMemoの特殊ケースであること、React.memoとの組み合わせで初めて効くパターン、依存配列内の関数の安定化を解説します。

  10. 10
    Hooksの使い分け — 判断フローと横断比較

    useState・useRef・useEffect・useMemo・useCallbackの5つを横断的に比較し、「どの場面でどのフックを使うか」の判断フローを整理します。

読みはじめる