はい、承知いたしました。「React FCとは？ 関数コンポーネントの基本と使い方を解説」というテーマで、約5000語の詳細な記事を執筆します。記事の内容を直接表示します。

React FCとは？ 関数コンポーネントの基本と使い方を徹底解説

Reactを使ったモダンなフロントエンド開発において、コンポーネントはUIを構築するための基本的な要素です。そして現在、そのコンポーネントの記述形式として主流となっているのが「関数コンポーネント」です。かつては「ステートを持たないただの関数」として扱われていましたが、React Hooksの登場により、関数コンポーネントはステートや副作用といったリッチな機能を扱えるようになり、開発の中心となりました。

本記事では、この「関数コンポーネント」（しばしば「React FC」とも呼ばれます）に焦点を当て、その基本的な概念から、Propsの扱い、そしてReact開発に不可欠な「Hooks」を使った状態管理や副作用の処理まで、詳細かつ網羅的に解説します。また、TypeScriptでの型定義や、パフォーマンス最適化のヒント、さらにはクラスコンポーネントとの比較にも触れ、関数コンポーネントを深く理解するための知識を提供します。

React開発初心者の方から、改めて関数コンポーネントとHooksの使い方を体系的に学びたい経験者の方まで、幅広く参考にしていただける内容を目指します。

1. はじめに：Reactの進化とコンポーネント

1.1 Reactにおけるコンポーネントの役割

Reactは、ユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。Reactの核心的な考え方の一つに「コンポーネント指向」があります。コンポーネントとは、UIを再利用可能な独立した小さな部品に分割したものです。例えば、ウェブサイトのヘッダー、フッター、ボタン、リストの各項目などは、それぞれ独立したコンポーネントとして考えることができます。

コンポーネント指向には、以下のようなメリットがあります。

• 再利用性: 一度作成したコンポーネントは、アプリケーション内の様々な場所で繰り返し使用できます。これにより、コードの重複を減らし、開発効率を向上させます。
• 保守性: UIが小さな部品に分割されているため、特定の機能や見た目を変更する際に、影響範囲が限定され、修正が容易になります。
• 開発効率: チーム開発において、各開発者が異なるコンポーネントを並行して開発できます。
• 可読性: コードが部品ごとに整理されるため、全体構造が把握しやすくなります。

Reactにおいて、コンポーネントは「Props」（プロパティ）を通じて親コンポーネントからデータを受け取り、自身の「State」（状態）を持つことでインタラクティブなUIを実現し、最終的にレンダリングするべきUIの構造を記述した「JSX」を返します。

1.2 クラスコンポーネントから関数コンポーネントへ

Reactが登場した当初、コンポーネントを記述する主な方法は「クラスコンポーネント」でした。クラスコンポーネントはES6のクラス構文を用いて記述され、React.Componentを継承します。ライフサイクルメソッド（componentDidMount, componentDidUpdate, componentWillUnmountなど）を使用してコンポーネントの生成、更新、破棄の各段階で処理を実行したり、this.stateでローカルな状態を管理したりすることができました。

一方で、ステートやライフサイクルメソッドを必要としないシンプルなコンポーネントは、単なるJavaScriptの関数として記述することが推奨されていました。これらは「ステートレス関数コンポーネント」（Stateless Functional Components – SFC）と呼ばれ、Propsを受け取ってJSXを返すだけの純粋な関数でした。SFCはクラスコンポーネントに比べて記述が簡潔であるという利点がありました。

しかし、SFCはステートを持つことができず、ライフサイクルメソッドに相当する機能もありませんでした。そのため、インタラクティブなUIや複雑なロジックを扱う必要がある場合は、記述が冗長になりがちなクラスコンポーネントを使わざるを得ませんでした。

この状況を劇的に変えたのが、React v16.8で導入された「React Hooks」です。Hooksは、関数コンポーネントにステートやライフサイクルに似た機能、およびその他のReactの機能を「フック」として「引っ掛ける」ことができるようにする仕組みです。Hooksの登場により、関数コンポーネントでもクラスコンポーネントと同等、あるいはそれ以上の表現力を持つことができるようになりました。その結果、関数コンポーネントがReact開発の主流となり、現在では新しいコンポーネントを作成する際は関数コンポーネントで記述することが強く推奨されています。

本記事で解説する「React FC」とは、まさにこのHooksによって強化された現代の「関数コンポーネント」を指します。

2. React FCとは？ 関数コンポーネントの定義

React FC（Function Component）は、JavaScriptの関数として定義されるReactコンポーネントです。基本的な形は以下の通りです。

“`javascript
// 従来のfunctionキーワードを使った書き方
function MyComponent(props) {
// コンポーネントのロジック
return (
// レンダリングするJSX

);
}

// アロー関数を使った書き方（より一般的）
const MyComponent = (props) => {
// コンポーネントのロジック
return (
// レンダリングするJSX

);
};
“`

関数コンポーネントは以下の特徴を持ちます。

1. 関数であること: ただのJavaScript関数として定義されます。特別なクラス構文や継承は不要です。
2. Propsを引数として受け取る: 親コンポーネントから渡されるデータやコールバック関数は、関数の第一引数（慣習的にpropsという名前が使われます）としてまとめて渡されます。
3. JSXを返す: コンポーネントがレンダリングするUIの構造は、JSXとして返されます。JSXはJavaScriptの構文を拡張したもので、HTMLのような見た目でUIを記述できます。
4. Hooksを使うことでステートや副作用を扱える: Hooks (useState, useEffectなど) を利用することで、コンポーネント内で状態を保持したり、データ取得やDOM操作といった副作用を実行したりできます。

Hooksが登場する前の関数コンポーネントは、受け取ったPropsに基づいてUIを表示するだけの「ダムコンポーネント」や「プレゼンテーショナルコンポーネント」として使われることが多かったため、「Stateless Functional Components」と呼ばれていました。しかし、Hooksの登場により、関数コンポーネントでも自身でステートを持ち、ロジックを内包する「スマートコンポーネント」や「コンテナコンポーネント」の役割を担うことが可能になりました。そのため、「Functional Component」という呼び方がより適切であり、「FC」という略称も広く使われています。

3. React.FC 型注釈について (TypeScript)

Reactで開発する場合、近年ではTypeScriptを用いることが一般的です。TypeScriptを使うことで、静的な型チェックによるエラーの早期発見、コードの補完機能の向上、コードの意図を明確にするドキュメントとしての側面など、多くのメリットが得られます。

TypeScriptで関数コンポーネントを定義する際に、React.FCという型注釈を見かけることがあります。

“`typescript
import React from ‘react’;

// Propsの型を定義
type MyComponentProps = {
name: string;
age?: number; // オプショナルなプロパティ
};

// React.FC 型注釈を使った関数コンポーネントの定義
const MyComponent: React.FC = ({ name, age }) => {
return (

);
};
“`

React.FC（あるいはReact.FunctionalComponent）は、関数コンポーネントであることを示す型注釈です。ジェネリクスとしてPropsの型を渡すことができます (React.FC<MyComponentProps>)。

React.FCを使うことにはいくつかの利点があります。

• 関数コンポーネントであることの明示: コードを読む人に関数コンポーネントであることが明確に伝わります。
• 戻り値の型チェック: 戻り値がReactNode（JSX要素、文字列、nullなど）であることが期待される型として保証されます。
• 暗黙的なchildrenプロパティ: TypeScript 18より前のバージョンでは、React.FCを使用すると、Propsの型定義に明示的にchildrenプロパティを含めなくても、自動的にchildren?: React.ReactNodeという型がPropsに追加されていました。

しかし、この「暗黙的なchildrenプロパティ」が後に問題視されるようになりました。

• 意図しないchildrenの受け入れ: childrenを受け取ることを想定していないコンポーネントでも、型チェック上はchildrenを受け入れ可能となってしまい、誤ったコンポーネントの使い方をしてもエラーにならない可能性があります。
• 型の不明瞭さ: 実際のPropsの型定義にchildrenが含まれているかどうかが一見して分かりにくくなります。

そのため、TypeScript 18以降では、React.FCを使わずに、以下のようにPropsの型を直接関数に適用し、必要であればPropsの型定義の中でchildrenを明示的に定義することが推奨されています。

“`typescript
import React, { ReactNode } from ‘react’;

// Propsの型を定義
type MyComponentProps = {
name: string;
age?: number;
// childrenを受け取る場合は明示的に定義
children?: ReactNode;
};

// Propsの型を直接関数に適用する（推奨される方法）
const MyComponent = ({ name, age, children }: MyComponentProps) => {
return (

);
};
“`

この方法の方が、コンポーネントが受け取るPropsの型がより明確になり、意図しないPropsの受け入れを防ぐことができます。したがって、現代のReact + TypeScript環境では、React.FCを使用するよりもPropsの型エイリアスやインターフェースを定義し、それを関数引数に直接型注釈として適用するスタイルがベストプラクティスとされています。

4. 関数コンポーネントの基本構造と使い方

ここでは、Propsの受け渡し、JSXの返却、条件付きレンダリング、リストレンダリング、イベントハンドリングといった、関数コンポーネントの基本的な使い方を解説します。

4.1 Propsの受け取りと利用

関数コンポーネントは、引数として単一のオブジェクトを受け取ります。このオブジェクトには、親コンポーネントから渡されたすべてのPropsが格納されています。

“`javascript
// 親コンポーネント
function App() {
return (

);
}

// 子コンポーネント（関数コンポーネント）
function Greeting(props) {
// propsオブジェクトからnameとmessageプロパティにアクセス
return (

);
}
“`

Propsオブジェクトから個々のプロパティにアクセスするには、props.propertyNameのようにドット記法を使います。より一般的には、JavaScriptの分割代入（Destructuring Assignment）を使ってPropsを取り出すことが多いです。

javascript
// 分割代入を使った例
function Greeting({ name, message }) {
return (
<div>
<h1>{message}</h1>
<p>Hello, {name}!</p>
</div>
);
}

分割代入を使うことで、コードがより簡潔になり、コンポーネントがどのようなPropsを受け取るのかが一目で分かりやすくなります。Propsには、文字列、数値、真偽値、配列、オブジェクト、さらには関数なども渡すことができます。

“`javascript
// 関数をPropsとして渡す例
function Parent() {
const handleClick = () => {
alert(‘Button clicked!’);
};

return (

);
}

function Child({ onButtonClick, buttonText }) {
return (

{buttonText}

);
}
“`

4.2 JSXの返却規則

関数コンポーネントは、レンダリングするUIとしてJSXを返却します。ただし、いくつかの規則があります。

• 単一のルート要素: JSXを返す場合、通常は単一のルート要素（<div>, <p>, <span>など）で全体を囲む必要があります。

  “`javascript
  // OK
  function MyComponent() {
  return (

  Title

  Content

  );
  }

  // NG (隣接する要素)
  /
  function MyComponent() {
  return (

  Title

  Content

  // Syntax Error
  );
  }
  /
  “`

• React.Fragment: 単一のルート要素で囲みたくない場合（例えば、CSSのレイアウトを壊したくない場合など）は、React.Fragmentまたはその短縮構文（<>）を使用できます。FragmentはDOMには描画されません。

  “`javascript
  import React from ‘react’; // React.Fragmentを使う場合はインポートが必要

  // React.Fragmentを使った例
  function MyComponentWithFragment() {
  return (
  

  Title

  Content

  
  );
  }

  // 短縮構文を使った例（より一般的）
  function MyComponentWithFragmentShorthand() {
  return (
  <>

  Title

  Content

  );
  }
  “`

• null, boolean, undefinedの返却: コンポーネント何もレンダリングしない場合は、null, false, true, undefinedを返すことができます。これは条件付きレンダリングで便利です。数値の0はレンダリングされることに注意してください。

  javascript
function OptionalContent({ shouldShow }) {
if (!shouldShow) {
return null; // 何も表示しない
}
return <p>This content is optional.</p>;
}

4.3 条件付きレンダリング

Propsやステートの値に基づいて、表示するUIを切り替えることを条件付きレンダリングと言います。関数コンポーネントでは、通常のJavaScriptの条件分岐（if/else）や論理演算子 (&&, ? :) を使って簡単に実現できます。

• if/else ステートメント:

  javascript
function LoginButton({ isLoggedIn }) {
if (isLoggedIn) {
return <button>Logout</button>;
} else {
return <button>Login</button>;
}
}

• 論理AND (&&) 演算子: 条件が真の場合に要素をレンダリングしたい場合に便利です。

  javascript
function Mailbox({ unreadMessages }) {
return (
<div>
<h1>Hello!</h1>
{/* unreadMessages > 0 が真の場合、<p>...</p> がレンダリングされる */}
{unreadMessages > 0 &&
<p>You have {unreadMessages} unread messages.</p>
}
</div>
);
}
  注意点として、&& の左辺が 0 の場合、右辺の要素はレンダリングされず、代わりに 0 が表示されてしまいます。したがって、条件式はブール値になるように工夫するか、後述の三項演算子を使うのがより安全です。

• 三項演算子 (? :): if/else よりも簡潔に条件に応じた要素を切り替える場合に便利です。

  javascript
function UserStatus({ user }) {
return (
<div>
{user ? (
<p>Welcome, {user.name}!</p>
) : (
<p>Please log in.</p>
)}
</div>
);
}

4.4 リストレンダリング

配列のデータを基に要素のリストをレンダリングする場合、JavaScriptの配列メソッドであるmapを使用します。mapメソッドは配列の各要素に対してコールバック関数を実行し、その結果を新しい配列として返します。Reactはこの新しい配列に含まれるJSX要素をリストとしてレンダリングします。

“`javascript
function TodoList({ todos }) {
return (

{/ todos配列をmapして、各todoオブジェクトから
• 要素を生成 /}
  {todos.map(todo => (
  // ★重要★ リスト内の各要素には一意なkeyプロパティを付ける必要があります

• {todo.text}

))}

);
}

// 親コンポーネントでの利用例
function App() {
const myTodos = [
{ id: 1, text: ‘Learn React’ },
{ id: 2, text: ‘Build a project’ },
{ id: 3, text: ‘Deploy the app’ },
];

return (

);
}
“`

key属性の重要性:

リストをレンダリングする際に、key属性を付けることは非常に重要です。keyはReactがリスト内の各要素を識別するための特別な文字列または数値です。Reactはkeyを使って、リスト内の要素が追加、削除、並べ替えられたことを効率的に検出し、最小限のDOM操作でUIを更新します。

• keyには、リスト内で一意な値（データベースのIDなど）を使用する必要があります。
• リストの要素のインデックス（配列のindex）をkeyとして使うことも可能ですが、リストが静的で変更（追加、削除、並べ替え）されない場合に限定すべきです。リストが変更される可能性がある場合は、要素自身の安定した一意なIDをkeyとして使用しないと、意図しない挙動やパフォーマンスの問題が発生する可能性があります。

4.5 イベントハンドリング

ボタンのクリックや入力フィールドの値変更など、ユーザーの操作に応じた処理は、イベントハンドラーを介して行います。Reactでは、DOM要素にイベントリスナーを直接追加する代わりに、JSXの属性としてイベントハンドラー関数を指定します。属性名はキャメルケースで記述します（例: onClick, onChange, onSubmit）。

“`javascript
function MyButton() {
// イベントハンドラー関数を定義
const handleClick = () => {
alert(‘Button clicked!’);
};

return (
// onClick属性に関数ハンドラーを指定

Click Me

);
}
“`

イベントハンドラー関数には、通常、ブラウザのネイティブイベントオブジェクトをラップした「合成イベントオブジェクト」（Synthetic Event）が引数として渡されます。この合成イベントオブジェクトは、ブラウザ間の互換性を確保するためにReactによって提供されます。

“`javascript
function MyInput() {
const handleChange = (event) => {
// 合成イベントオブジェクトから入力値を取得
console.log(‘Input value:’, event.target.value);
};

return (

);
}
“`

イベントハンドラーに関数を渡す際は、関数定義そのものを渡す必要があります (onClick={handleClick})。関数呼び出しの結果を渡してしまうと、コンポーネメントがレンダリングされた瞬間にハンドラーが実行されてしまいます (onClick={handleClick()} は間違いです)。

イベントハンドラーに引数を渡したい場合は、アロー関数でラップします。

“`javascript
function MyList({ items }) {
// イベントハンドラー関数（引数を受け取る）
const handleItemClick = (item) => {
console.log(‘Clicked item:’, item);
};

return (

{items.map(item => (
• {/ アロー関数でラップして、handleItemClickに関数を呼び出すようにする /}
  handleItemClick(item)}>
  {item.name}
  

))}

);
}
“`

5. Hooksによる関数コンポーネントの機能拡張

React Hooksは、関数コンポーネントにステートやライフサイクル、コンテキストといったReactの機能を「フック」するための仕組みです。Hooksの登場により、関数コンポーネントはクラスコンポーネントと同等以上の表現力を持つに至りました。

5.1 Hooksの概念とルール

Hooksは、コンポーネントのトップレベルでのみ呼び出すことができます。ループ、条件分岐、ネストされた関数の中からHooksを呼び出すことはできません。このルールを守ることで、ReactはレンダリングごとにどのHooksが呼び出されたかを正確に追跡できます。

Hooksには多くの種類がありますが、ここでは主要なHooksについて解説します。

• useState: 関数コンポーネントにローカルなステートを追加します。
• useEffect: 関数コンポーネントで副作用（データの取得、DOM操作、購読など）を実行します。
• useContext: Context APIからコンテキストの値を読み取ります。
• useRef: レンダリング間で変化しない値を保持したり、DOM要素への参照を取得したりします。
• useReducer: useStateよりも複雑なステート管理を行う場合に利用します。
• useCallback: 関数のメモ化を行い、不要な関数再作成による子コンポーネントの再レンダリングを防ぎます。
• useMemo: 計算コストが高い処理の結果をメモ化し、不要な再計算を防ぎます。

5.2 useState による状態管理

useStateは、関数コンポーネントにローカルなステート（状態）を追加するためのフックです。useStateを呼び出すと、現在のステートの値と、そのステートを更新するための関数がペアで返されます。

基本構文:

“`javascript
import React, { useState } from ‘react’;

function Counter() {
// countというステート変数と、setCountという更新関数を宣言
// 初期値は0
const [count, setCount] = useState(0);

const increment = () => {
// setCount関数を呼び出してステートを更新
setCount(count + 1);
};

return (

);
}
“`

• useState(initialState): useStateを呼び出す際に、ステートの初期値を引数として渡します。初期値は初回レンダリング時のみ使用されます。
• [state, setState]: useStateは配列を返します。配列の最初の要素は現在のステートの値、二番目の要素はそのステートを更新するための関数です（慣習的にset + ステート変数名 という名前が使われます）。配列の分割代入を使ってこれらの値を取り出します。

ステートの更新:

ステートを更新するには、setCountのような更新関数を呼び出します。setCount(newValue)のように新しいステートの値を直接渡すか、前のステートに基づいた更新の場合は関数を渡します。

javascript
// 前のステートに基づいた更新（推奨）
const increment = () => {
setCount(prevCount => prevCount + 1); // prevCountは更新前のステートの値
};
更新関数に関数を渡す形式（prevCount => prevCount + 1）は、非同期的に行われる可能性のあるステート更新において、常に最新のステート値に基づいて計算を行うことを保証します。特に、連続して何度もステートを更新する場合や、非同期処理の中でステートを更新する場合に重要になります。

オブジェクトや配列の更新:

useStateはプリミティブ型だけでなく、オブジェクトや配列もステートとして保持できます。ただし、ステートがオブジェクトや配列の場合、既存のオブジェクトや配列を直接変更（ミューテーション）するのではなく、常に新しいオブジェクトや配列を生成して更新関数に渡す必要があります。 Reactはオブジェクトや配列の参照が変更されたかどうかを見て再レンダリングを判断するため、直接変更しても再レンダリングが起きないか、予期しない動作になる可能性があります。

“`javascript
import React, { useState } from ‘react’;

function UserProfile() {
const [user, setUser] = useState({ name: ‘Guest’, age: null });

const updateName = () => {
// 新しいオブジェクトを生成して更新
setUser({ …user, name: ‘Alice’ }); // スプレッド構文で既存のプロパティをコピーし、nameを上書き
};

const addHobby = (hobby) => {
// 新しい配列を生成して更新
setUser({
…user,
hobbies: user.hobbies ? […user.hobbies, hobby] : [hobby] // 既存の配列をコピーし、新しい要素を追加
});
};

return (

);
}
“`

遅延初期化:

useStateの初期値が計算コストの高い処理の結果に依存する場合、初期値を直接渡す代わりに、初期値を計算する関数を渡すことができます。この関数は初回レンダリング時のみ実行されます。

“`javascript
const initialState = expensiveCalculation(props); // レンダリングごとに実行される

// 初期値を計算する関数を渡す（初回レンダリング時のみ実行）
const [state, setState] = useState(() => expensiveCalculation(props));
“`

これにより、コンポーネントが再レンダリングされるたびに不要な計算が実行されるのを防ぎ、パフォーマンスを向上させることができます。

複数のuseState:

一つの関数コンポーネント内で、必要に応じて複数のuseStateを呼び出すことができます。それぞれのuseState呼び出しは独立したステート変数とその更新関数を提供します。

“`javascript
import React, { useState } from ‘react’;

function MyForm() {
const [name, setName] = useState(”);
const [email, setEmail] = useState(”);
const [isSubmitting, setIsSubmitting] = useState(false);

const handleSubmit = (event) => {
event.preventDefault();
setIsSubmitting(true);
// フォーム送信ロジック…
console.log(‘Submitting:’, { name, email });
// 完了したらステートをリセットなど
setIsSubmitting(false);
};

return (

);
}
“`
このように、複数のステート変数を宣言することで、コンポーネントの状態を細かく管理できます。

5.3 useEffect による副作用の処理

useEffectは、関数コンポーネント内で副作用（side effects）を実行するためのフックです。副作用とは、Reactのレンダリングプロセス中に直接行うべきではない操作のことです。例えば、データフェッチ（API呼び出し）、DOMの直接操作、タイマーの設定、イベントリスナーの登録・解除、購読の設定・解除などが副作用にあたります。

クラスコンポーネントでは、これらの副作用は主にcomponentDidMount, componentDidUpdate, componentWillUnmountといったライフサイクルメソッドで行われていました。useEffectフックは、これらのライフサイクルメソッドの役割を一つにまとめたようなものです。

基本構文:

“`javascript
import React, { useState, useEffect } from ‘react’;

function Timer() {
const [seconds, setSeconds] = useState(0);

// 副作用を定義
useEffect(() => {
// この関数が副作用です
const intervalId = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);

// クリーンアップ関数を返す
return () => {
  // この関数はコンポーネントがアンマウントされる時や、
  // 依存配列が変更されてエフェクトが再実行される直前に実行されます
  clearInterval(intervalId);
};

}, []); // ★重要★ 依存配列
// []が指定されているため、このエフェクトはマウント時のみ実行され、
// アンマウント時にクリーンアップされます。

return (

);
}
“`

useEffectは第一引数に副作用を実行する関数を、第二引数に「依存配列」（Dependencies Array）を受け取ります。

実行タイミングと依存配列:

useEffectで指定した副作用関数は、デフォルトではコンポーネントの初回レンダリング後およびそれ以降のすべての再レンダリング後に実行されます。しかし、第二引数の依存配列によって、この実行タイミングを制御できます。

1. 依存配列を省略:
   useEffect(() => { ... });
   → 副作用はコンポーネントの初回レンダリング後と、その後のすべての再レンダリング後に実行されます。これは、ステートやPropsの変更によってコンポーネントが更新されるたびに、副作用も常に最新の状態を反映するように実行したい場合に便利です。ただし、頻繁に実行されるとパフォーマンス問題を引き起こす可能性があります。

2. 空の依存配列 []:
   useEffect(() => { ... }, []);
   → 副作用はコンポーネントの初回レンダリング後のみ実行されます。その後の再レンダリングでは実行されません。これは、componentDidMountに相当する挙動です。外部APIからのデータ取得や、一度だけ設定すれば良い購読などに使用します。空配列を渡すと、エフェクトはコンポーネントのライフサイクルを通じて一度だけ実行されることをReactに伝えます。

3. 依存配列に値を指定 [value1, value2, ...]:
   useEffect(() => { ... }, [someProp, someState]);
   → 副作用はコンポーネントの初回レンダリング後と、依存配列に含まれるいずれかの値が前回のレンダリングから変更された場合にのみ実行されます。これは、componentDidMountとcomponentDidUpdateの一部に相当する挙動です。エフェクト内で使用しているPropsやステートなど、変更を監視したい値を指定します。エフェクト内で使用しているコンポーネントスコープの値（Props, ステート, コンポーネント内で定義された関数など）は、依存配列に含めるべきです。 ESLintのreact-hooks/exhaustive-depsルールは、このルールを守るのを助けてくれます。

クリーンアップ関数:

useEffectの副作用関数は、必要に応じてクリーンアップ関数を返すことができます。クリーンアップ関数は、コンポーネントがアンマウントされる時（componentWillUnmountに相当）や、依存配列が変更されてエフェクトが再実行される直前に実行されます。これは、エフェクトによって設定された購読の解除、タイマーのクリア、イベントリスナーの削除など、メモリリークや不要な処理を防ぐために重要です。

“`javascript
useEffect(() => {
const subscription = someApi.subscribe(); // 購読を開始

return () => {
subscription.unsubscribe(); // クリーンアップで購読を解除
};
}, []); // この購読はマウント時のみ開始され、アンマウント時に解除される
“`

依存配列が空でない場合、エフェクトが再実行される前にもクリーンアップ関数が実行されます。これは、新しい依存値に基づいて新しい副作用が実行される前に、古い副作用によって設定されたものをクリーンアップするためです。

“`javascript
useEffect(() => {
console.log(‘Fetching data for user ID:’, userId);
const controller = new AbortController(); // API呼び出しの中止に使用

fetch(/api/users/${userId}, { signal: controller.signal })
.then(response => response.json())
.then(data => console.log(‘User data:’, data))
.catch(err => {
if (err.name === ‘AbortError’) {
console.log(‘Fetch aborted’);
} else {
console.error(‘Fetch error:’, err);
}
});

return () => {
console.log(‘Cleaning up effect for user ID:’, userId);
controller.abort(); // エフェクト再実行時やアンマウント時にAPI呼び出しを中止
};
}, [userId]); // userIdが変更されたらエフェクトを再実行
``
この例では、userIdが変更されるたびに前回のfetchが中断され、新しいfetch`が開始されます。これにより、古いAPIリクエストの結果が遅れて到着し、意図しないステート更新を引き起こすのを防ぐことができます。

複数のuseEffect:

一つのコンポーネント内で、目的の異なる複数のuseEffectを定義することができます。例えば、データ取得用のエフェクト、DOM操作用のエフェクト、購読用のエフェクトなどを分離して記述することで、関連するロジックをまとめて管理しやすくなります。

“`javascript
import React, { useState, useEffect } from ‘react’;

function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

// データ取得のエフェクト
useEffect(() => {
setLoading(true);
setError(null);

const controller = new AbortController();
const signal = controller.signal;

fetch(`/api/users/${userId}`, { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    setUser(data);
    setLoading(false);
  })
  .catch(err => {
    if (err.name !== 'AbortError') {
      setError(err);
      setLoading(false);
    }
  });

return () => {
  controller.abort();
};

}, [userId]); // userIdが変更されたら再実行

// タイトル設定のエフェクト（DOM操作）
useEffect(() => {
if (user) {
document.title = Profile: ${user.name};
} else {
document.title = ‘Loading profile…’;
}
// クリーンアップ関数は不要（上書きされるだけのため）
}, [user]); // userが変更されたら再実行

if (loading) return

Loading…

;
if (error) return

Error: {error.message}

;
if (!user) return

No user data available.

;

return (

);
}
``
このように、役割ごとにuseEffect`を分割することで、コードの可読性と保守性が向上します。

5.4 useContext によるコンテキストの使用

Context APIは、Propsバケツリレー（深くネストされたコンポーネントツリーを通じてPropsを手渡ししていくこと）を避けるために、コンポーネントツリー全体にわたってデータを共有する仕組みです。useContextフックは、関数コンポーネントからこのContextの値に簡単にアクセスするためのフックです。

基本構文:

まず、React.createContextでContextオブジェクトを作成します。

“`javascript
// src/contexts/ThemeContext.js
import React from ‘react’;

// Contextオブジェクトを作成（デフォルト値は’light’）
export const ThemeContext = React.createContext(‘light’);
“`

次に、Contextオブジェクトの.Providerコンポーネントを使って、コンポーネントツリーの上位で共有したい値を指定します。

“`javascript
// src/App.js
import React, { useState } from ‘react’;
import { ThemeContext } from ‘./contexts/ThemeContext’;
import ThemedComponent from ‘./components/ThemedComponent’;
import ThemeSwitcher from ‘./components/ThemeSwitcher’;

function App() {
const [theme, setTheme] = useState(‘light’);

const toggleTheme = () => {
setTheme(prevTheme => prevTheme === ‘light’ ? ‘dark’ : ‘light’);
};

return (
// Context ProviderでthemeとtoggleTheme関数を共有

My App

);
}
“`

そして、子孫コンポーネントではuseContextフックを使ってContextの値にアクセスします。

“`javascript
// src/components/ThemedComponent.js
import React, { useContext } from ‘react’;
import { ThemeContext } from ‘../contexts/ThemeContext’;

function ThemedComponent() {
// useContextフックを使ってContextの値（{ theme, toggleTheme }）を取得
const { theme } = useContext(ThemeContext);

// コンテキストの値に応じてスタイルを適用
const style = {
backgroundColor: theme === ‘light’ ? ‘#fff’ : ‘#333’,
color: theme === ‘light’ ? ‘#333’ : ‘#fff’,
padding: ’20px’,
marginTop: ’20px’
};

return (

);
}

// src/components/ThemeSwitcher.js
import React, { useContext } from ‘react’;
import { ThemeContext } from ‘../contexts/ThemeContext’;

function ThemeSwitcher() {
// useContextフックを使ってContextの値（{ theme, toggleTheme }）を取得
const { theme, toggleTheme } = useContext(ThemeContext);

return (

Switch to {theme === ‘light’ ? ‘Dark’ : ‘Light’} Theme

);
}
``useContext(ContextObject)`と呼び出すだけで、最も近い上位のProviderから提供されるContextの値を取得できます。これにより、Propsを中間コンポーネントで手渡しする手間が省け、コードがスッキリします。

Contextはステート管理ツールとしてReduxやZustandなどのライブラリと比較されることがありますが、Contextはあくまで「データの受け渡し」に特化した機能です。シンプルな全体的なステート管理には十分ですが、アプリケーションの規模が大きくなったり、複雑なステート遷移が必要になったりする場合は、専用のステート管理ライブラリの導入を検討すると良いでしょう。

5.5 useRef による永続的な値とDOM参照

useRefフックは、レンダリング間で保持される変更可能な値を持つためのフックです。useStateと似ていますが、useRefで管理される値は変更されても再レンダリングをトリガーしません。主に以下の二つの目的で使用されます。

1. DOM要素への参照: 特定のDOM要素に直接アクセスしたい場合に使用します。
2. レンダリング間で変化しない可変値の保持: タイマーID、前回のProps/ステートの値、購読オブジェクトなど、コンポーネントの生存期間中に維持したいが、変更されても再レンダリングは不要な値を保持する場合に使用します。

基本構文:

“`javascript
import React, { useRef, useEffect } from ‘react’;

function MyComponentWithRef() {
// 初期値nullでrefオブジェクトを作成
const myInputRef = useRef(null);
const timerIdRef = useRef(null);
const previousValueRef = useRef(null);

// DOM要素への参照例
useEffect(() => {
// currentプロパティを通じてDOM要素にアクセス
if (myInputRef.current) {
myInputRef.current.focus(); // インプットフィールドにフォーカス
}
}, []); // マウント時に一度だけ実行

// レンダリング間で可変値を保持する例
useEffect(() => {
timerIdRef.current = setInterval(() => {
console.log(‘Timer tick’);
}, 1000);

// クリーンアップでタイマーをクリア
return () => {
  clearInterval(timerIdRef.current);
};

}, []); // マウント/アンマウント時に実行

// 前回の値を保持する例
const currentValue = ‘some value’; // 仮の値
useEffect(() => {
// エフェクトが実行される時点での現在の値を、次回のレンダリングのために保存
previousValueRef.current = currentValue;
}, [currentValue]); // currentValueが変更されるたびに実行

console.log(‘Previous value:’, previousValueRef.current); // レンダリング時に表示

return (

);
}
“`

• useRef(initialValue): useRefを呼び出す際に、.currentプロパティの初期値を引数として渡します。
• refObject.current: useRefは、currentというプロパティを持つプレーンなJavaScriptオブジェクトを返します。この.currentプロパティの値は変更可能であり、その変更は再レンダリングをトリガーしません。コンポーネントのライフサイクル全体を通じて、このrefオブジェクトのインスタンスは同じものが保持されます。

useRefとuseStateの違い:

UIに表示される値や、その変更によってUIを更新したい場合はuseStateを、そうでない内部的な値やDOM参照にはuseRefを使用するのが適切です。

5.6 useReducer による複雑な状態管理

useReducerは、useStateの代替となるフックで、特にステートのロジックが複雑な場合や、複数のステート変数が関連している場合に有用です。Reduxのようなreducerパターンに基づいています。

基本構文:

“`javascript
import React, { useReducer } from ‘react’;

// 1. Reducer関数を定義する
// (currentState, action) => newState
function counterReducer(state, action) {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
case ‘reset’:
return { count: action.payload }; // actionにデータを含めることも可能
default:
return state; // 未知のアクションは現在のステートを返す
}
}

// 2. useReducerフックを使用する
function CounterWithReducer() {
// [現在のstate, dispatch関数] = useReducer(reducer関数, 初期state);
const [state, dispatch] = useReducer(counterReducer, { count: 0 });

return (

);
}
“`

• useReducer(reducer, initialState, init?): useReducerフックは3つの引数を取ることができます。
  1. reducer: 現在のステートとアクションを受け取り、新しいステートを返す関数です。
  2. initialState: ステートの初期値です。
  3. init (省略可能): 遅延初期化のための関数です。init(initialState)の結果が最初のステートとなります。
• [state, dispatch]: useReducerは配列を返します。最初の要素は現在のステートの値、二番目の要素はステートを更新するためのdispatch関数です。

dispatch関数とactionオブジェクト:

ステートを更新するには、dispatch関数を呼び出し、ステートの変更内容を表す「アクション」オブジェクトを引数として渡します。アクションオブジェクトは通常、typeプロパティを持ち、必要に応じて変更に関連するデータ（payloadなど）を含みます。dispatch(action)が呼び出されると、Reactは現在のステートと渡されたアクションをreducer関数に渡し、reducer関数が返した新しいステートでコンポーネントを再レンダリングします。

useStateとuseReducerの使い分け:

• useState: ステートの更新ロジックがシンプルで、単一のステート変数や関連性の薄い複数のステート変数がある場合に適しています。更新が直接的で分かりやすいです。
• useReducer: ステートの更新ロジックが複雑で、多くの異なるアクションタイプがある場合、または複数のステート変数が密接に関連しており、それらの更新が同期的に行われる必要がある場合に適しています。関連する更新ロジックをreducer関数として一箇所にまとめられるため、コードが整理されます。また、Context APIと組み合わせてグローバルなステート管理の簡易版として使用されることもあります。

複雑なフォームのステート管理、状態遷移が多いUI要素（例: ローディング状態、エラー状態などを含むデータフェッチ）、ローカルなショッピングカート管理などにuseReducerは力を発揮します。

5.7 useCallback による関数のメモ化

useCallbackフックは、関数の定義自体をメモ化（キャッシュ）するためのフックです。特定の関数がPropsとして子コンポーネントに渡される場合に、不要な関数の再作成を防ぎ、それに起因する子コンポーネントの不要な再レンダリングを抑制するために使用されます。

問題点: 関数コンポーネントが再レンダリングされるたびに、そのコンポーネント内で定義された関数は毎回新しく作成されます。親コンポーネントから子コンポーネントに関数をPropsとして渡している場合、親が再レンダリングされると、新しい関数が作成され、子に渡されます。子がPropsの変更をチェックする際に、新しい関数は前回の関数とは参照が異なるため、「Propsが変更された」と判断し、子コンポーネリングも再レンダリングされてしまいます。これは、子コンポーネントがReact.memoなどで最適化されている場合に特に問題となります。

useCallbackの使い方:

“`javascript
import React, { useState, useCallback } from ‘react’;
import Button from ‘./Button’; // React.memoでメモ化された子コンポーネント

function ParentComponent() {
const [count, setCount] = useState(0);
const [text, setText] = useState(”);

// countが変わったときだけこの関数を再作成
const handleIncrement = useCallback(() => {
setCount(count + 1);
}, [count]); // 依存配列にcountを指定

// textが変わったときだけこの関数を再作成
const handleChange = useCallback((e) => {
setText(e.target.value);
}, [text]); // 依存配列にtextを指定

// 依存配列が空の場合、この関数は初回レンダリング時のみ作成され、以降再作成されない
const handleClickWithoutDeps = useCallback(() => {
console.log(‘Button clicked’);
}, []); // 依存配列が空

return (

  <input type="text" value={text} onChange={handleChange} /> {/* 関数自体を渡す */}

  {/* メモ化された子コンポーネントに安定した関数を渡す */}
  <Button onClick={handleClickWithoutDeps}>Static Button</Button>
</div>

  {/* taxRate に依存しない他のステートや Props が変更されても total は再計算されない */}
  <button onClick={() => setTaxRate(0.10)}>Set Tax Rate to 10%</button>
  {/* <button onClick={handleAddItem}>Add Item</button> */} {/* このボタンは total の再計算をトリガーする */}
</div>

setLoading(true);
setError(null);

fetch(url, { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    setData(data);
    setLoading(false);
  })
  .catch(err => {
    if (err.name !== 'AbortError') {
      setError(err);
      setLoading(false);
    }
  });

return () => {
  controller.abort();
};

  {/* もし MemoizedMyComponent に渡すPropsにオブジェクトや関数が含まれる場合、
      それらを useCallback や useMemo でメモ化しないと、参照が変わるため再レンダリングされてしまう
      例: <MemoizedChild data={{ name: 'Test', value: 123 }} />  => 毎回新しいオブジェクトが作成される
  */}
</div>

  {/* 子コンポーネントにメモ化されたPropsを渡す */}
  <MemoizedChildComponent
    onButtonClick={handleIncrement} // メモ化された関数
    data={memoizedData} // メモ化されたオブジェクト
    itemNames={memoizedItemsArray} // メモ化された配列
  />
  {/* 親コンポーネントの count だけが変わっても、
      子の props (onButtonClick, data, itemNames) の参照は変わらないため、
      MemoizedChildComponent は再レンダリングされない（items が変更された場合は再レンダリングされる）
  */}
</div>

setLoading(true); // データ取得開始時にローディング状態をtrueに
setError(null); // エラー状態をリセット

fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, { signal })
  .then(response => {
    if (!response.ok) {
      // HTTPエラーレスポンスの場合
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    setPost(data); // データをステートに保存
    setLoading(false); // ローディング完了
  })
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      setError(err); // エラーをステートに保存
      setLoading(false); // ローディング完了（エラーのため）
    }
  });

// クリーンアップ関数: コンポーネントがアンマウントされる時やpostIdが変わる前に実行
return () => {
  controller.abort(); // API呼び出しを中断
};