Reactの基礎 - Hooksの基礎のソースを表示

== 概要 ==
React Hooksは、React 16.8 (2019年2月リリース) で導入された機能である。<br>
Hooksの登場以前は、ステート管理やライフサイクル処理にはクラスコンポーネントが必要であったが、Hooksの導入によって関数コンポーネントでもこれらの処理が実現できるようになった。<br>
<br>
クラスコンポーネントには、以下に示すような問題点が存在していた。<br>
* ロジックの再利用が困難であり、コンポーネント間で状態を持つロジックを共有するためには、Higher-Order Components (HOC)やRender Props等の複雑なパターンが必要であった。
* ContextプロバイダやHOCを多数組み合わせることで深くネストした「Wrapper Hell」が発生しやすく、コードの可読性が低下するという問題もあった。
* ライフサイクルメソッドに無関係なロジックが混在しがちになり、コンポーネントが肥大化する傾向があった。
<br>
Hooksはこれらの問題を解決するために設計された。<br>
カスタムHookを使用することにより、状態を持つロジックをコンポーネント間で簡単に再利用できるようになった。<br>
また、<code>useEffect</code> によってライフサイクルのロジックを関心事ごとにまとめて記述できるようになり、処理の見通しが大幅に向上した。<br>
<br>
現在のReact開発では、関数コンポーネントとHooksを組み合わせた記述スタイルが標準となっている。<br>
新規プロジェクトではクラスコンポーネントを使用する必要はなく、関数コンポーネントとHooksのみで、かつてクラスコンポーネントが担っていた全ての処理を定義できる。<br>
<br><br>

== Hooksとは ==
Hooksは、関数コンポーネントに対してステート管理やライフサイクル処理、コンテキストへのアクセス等の機能を追加するための関数群である。<br>
Hook の名前は慣例として <code>use</code> で始まる。<br>
<br>
==== 基本的な使い方 ====
<code>useState</code> と <code>useEffect</code> を使用した基本的な関数コンポーネントの例を以下に示す。<br>
<br>
以下の例では、<code>useState</code> でステートを定義し、<code>useEffect</code> でカウントの変化に応じてドキュメントのタイトルを更新している。<br>
クラスコンポーネントで必要であった <code>this</code> の参照やバインディング処理は一切不要である。<br>
<br>
 <syntaxhighlight lang="typescript">
 import { useState, useEffect } from 'react';
 
 function Counter() {
    const [count, setCount] = useState<number>(0);
 
    useEffect(() => {
       document.title = `カウント: ${count}`;
    }, [count]);
 
    return (
       <div>
          <p>カウント: {count}</p>
          <button onClick={() => setCount(count + 1)}>増加</button>
       </div>
    );
 }
 
 export default Counter;
 </syntaxhighlight>
<br><br>

== Hooksの基本ルール ==
Hooksを正しく使用するためには、Reactが定める2つの基本ルールを厳守する必要がある。<br>
<br>
<u>これらのルールは、ReactがHookの呼び出し順序に基づいて内部状態を管理していることに起因する。</u><br>
<br>
==== トップレベルでのみ呼び出す ====
Hooksは、必ずコンポーネント関数 または カスタムHookのトップレベルで呼び出さなければならない。<br>
条件分岐 (if / else)、ループ (for / while)、ネストされた関数の内部では呼び出してはならない。<br>
<br>
Reactは、レンダリングのたびにHookが常に同じ順序で呼び出されることを前提として、各Hookに対応する内部状態を管理している。<br>
条件分岐やループの中でHookを呼び出すと、ある条件下ではHookがスキップされ、呼び出し順序が変化してしまう。<br>
<br>
これにより、Reactが正しい内部状態をHookに対応付けられなくなり、バグが発生する。<br>
<br>
* 正しい例 (トップレベルで呼び出す)
*: <syntaxhighlight lang="typescript">
 import { useState, useEffect } from 'react';
 
 interface UserProfileProps {
    userId: string;
    showDetails: boolean;
 }
 
 function UserProfile({ userId, showDetails }: UserProfileProps) {
    // 正しい : トップレベルで常に呼び出される
    const [user, setUser] = useState<string | null>(null);
    const [isLoading, setIsLoading] = useState<boolean>(true);
 
    useEffect(() => {
       // 条件分岐はuseEffectの中に入れる
       if (!showDetails) return;
       setIsLoading(false);
    }, [userId, showDetails]);
 
    if (!showDetails) {
       return <p>詳細を非表示</p>;
    }
 
    return <p>ユーザ: {user}</p>;
 }
 </syntaxhighlight>
*: <br>
* 誤りの例 (条件分岐の中で呼び出す)
*: <syntaxhighlight lang="typescript">
 import { useState, useEffect } from 'react';
 
 interface UserProfileProps {
    userId: string;
    showDetails: boolean;
 }
 
 function UserProfile({ userId, showDetails }: UserProfileProps) {
    const [user, setUser] = useState<string | null>(null);
 
    // 誤り : 条件分岐の中でHookを呼び出してはならない
    if (showDetails) {
       useEffect(() => {
          setUser('田中 太郎');
       }, [userId]);
    }
 
    return <p>ユーザ: {user}</p>;
 }
 </syntaxhighlight>
<br>
==== 関数コンポーネント または カスタムHook内でのみ使用 ====
Hooksは、Reactの関数コンポーネントまたはカスタムHookの内部でのみ呼び出せる。<br>
通常のTypeScript / JavaScript関数、クラスコンポーネントのメソッド、イベントハンドラの外部から直接呼び出すことはできない。<br>
<br>
カスタムHookとは、<code>use</code> で始まる名前を持つ関数であり、その内部で他のHookを呼び出すことができる。<br>
<br>
カスタムHookを使用することにより、ステートを持つロジックを複数のコンポーネント間で再利用できる。<br>
<br>
 <syntaxhighlight lang="typescript">
 import { useState } from 'react';
 
 // 正しい : カスタムHookはuseで始まる関数として定義する
 function useCounter(initialValue: number) {
    const [count, setCount] = useState<number>(initialValue);
    const increment = () => setCount(c => c + 1);
    const decrement = () => setCount(c => c - 1);
    const reset = () => setCount(initialValue);
    return { count, increment, decrement, reset };
 }
 
 // 正しい : 関数コンポーネント内で使用する
 function CounterDisplay() {
    const { count, increment, decrement, reset } = useCounter(0);
 
    return (
       <div>
          <p>カウント: {count}</p>
          <button onClick={increment}>増加</button>
          <button onClick={decrement}>減少</button>
          <button onClick={reset}>リセット</button>
       </div>
    );
 }
 </syntaxhighlight>
<br>
==== eslint-plugin-react-hooks ====
<u>Hooksのルール違反を自動検出するために、<code>eslint-plugin-react-hooks</code> の使用が公式に推奨されている。</u><br>
<br>
このプラグインには、以下に示す2つのルールが含まれている。<br>
<br>
* <code>rules-of-hooks</code>
*: Hooksの2つの基本ルール (トップレベルでの呼び出し、関数コンポーネントまたはカスタムHook内での使用) を強制するルールである。
*: 違反した場合はエラー (error) として報告される。
* <code>exhaustive-deps</code>
*: <code>useEffect</code>、<code>useCallback</code>、<code>useMemo</code> 等の依存配列に、必要な全ての依存値が含まれているかを検証するルールである。
*: 依存配列の記述漏れを警告 (warn) として報告する。
<br>
推奨設定を以下に示す。<br>
<br>
 <syntaxhighlight lang="json">
 {
    "plugins": ["react-hooks"],
    "rules": {
       "react-hooks/rules-of-hooks": "error",
       "react-hooks/exhaustive-deps": "warn"
    }
 }
 </syntaxhighlight>
<br>
Create React App および Next.jsでは、このプラグインがデフォルトで有効になっている。<br>
Vite等の他のビルドツールを使用する場合は、手動でインストールおよび設定する必要がある。<br>
<br>
 npm install --save-dev eslint-plugin-react-hooks
<br><br>

== Hooks一覧と分類 ==
下表に、Reactが提供する全ての組み込みHookを分類したものを示す。<br>
<br>
<center>
{| class="wikitable"
|+ React 組み込みHooks一覧
! 分類 !! Hook名 !! 説明 !! 導入バージョン
|-
| 状態管理系 || <code>useState</code> || コンポーネントにローカルなステートを追加する。<br>値とセッター関数のペアを返す。 || React 16.8
|-
| 状態管理系 || <code>useReducer</code> || 複雑なステート更新ロジックをreducer関数で管理する。<br><code>useState</code> の代替として使用する。 || React 16.8
|-
| 副作用系 || <code>useEffect</code> || レンダリング後に副作用処理 (データ取得、サブスクリプション、DOM操作等) を実行する。 || React 16.8
|-
| 副作用系 || <code>useLayoutEffect</code> || DOMの変更後、Webブラウザの描画前に同期的に副作用を実行する。<br>レイアウト計算が必要な場合に使用する。 || React 16.8
|-
| 副作用系 || <code>useInsertionEffect</code> || CSS-in-JSライブラリ向けのHook<br>DOMへの変更前に同期的に実行される。 || React 18
|-
| 参照系 || <code>useRef</code> || レンダリングをトリガーしないミュータブルな参照値を保持する。<br>DOMノードへのアクセスにも使用する。 || React 16.8
|-
| 参照系 || <code>useImperativeHandle</code> || <code>forwardRef</code> と組み合わせて、親コンポーネントに公開するrefの値をカスタマイズする。 || React 16.8
|-
| コンテキスト系 || <code>useContext</code> || React Context の値を読み取る。<br>プロバイダの最も近い祖先から値を取得する。 || React 16.8
|-
| パフォーマンス系 || <code>useMemo</code> || 計算コストの高い値をメモ化する。<br>依存値が変化した時のみ再計算する。 || React 16.8
|-
| パフォーマンス系 || <code>useCallback</code> || コールバック関数をメモ化する。<br>依存値が変化した時のみ新しい関数を生成する。 || React 16.8
|-
| パフォーマンス系 || <code>useTransition</code> || ステート更新を「緊急でない」トランジションとしてマークし、UIの応答性を維持する。 || React 18
|-
| パフォーマンス系 || <code>useDeferredValue</code> || 値の更新を遅延させ、より緊急な更新を優先してレンダリングする。 || React 18
|-
| ID系 || <code>useId</code> || サーバとクライアント間で一貫したユニークIDを生成する。<br>アクセシビリティ属性の紐付けに使用する。 || React 18
|-
| 外部ストア系 || <code>useSyncExternalStore</code> || Reactの外部にあるデータストア (Redux 等) をサブスクライブするためのHook || React 18
|-
| デバッグ系 || <code>useDebugValue</code> || カスタムHookに対して、React DevToolsでのラベルを設定する。<br>デバッグ用途に使用する。 || React 16.8
|-
| React 19新規 || <code>use</code> || PromiseやContextの値をレンダリング中に直接読み取る。<br>条件分岐内でも使用できる。 || React 19
|-
| React 19新規 || <code>useActionState</code> || Server Actionsの実行状態と結果を管理する。<br>フォーム送信に対応する。 || React 19
|-
| React 19新規 || <code>useFormStatus</code> || 親フォームの送信状態 (送信中かどうか等) を読み取る。 || React 19
|-
| React 19新規 || <code>useOptimistic</code> || 非同期処理の完了前に楽観的にUIを更新し、応答性を向上させる。 || React 19
|}
</center>
<br><br>

== React 19での変更点 ==
React 19では、新しいHookの追加と既存のAPIの簡略化が行われた。<br>
<br>
==== 新しいHooks ====
React 19で追加された新しいHookを以下に示す。<br>
<br>
* <code>use</code>
*: Promise や Contextの値をレンダリング中に直接読み取ることができるHookである。
*: 従来のHookとは異なり、条件分岐やループの中でも呼び出すことができる。
*: Promiseを渡した場合、Suspenseと組み合わせてデータが解決されるまでコンポーネントのレンダリングを中断する。
*: <syntaxhighlight lang="typescript">
 import { use, Suspense } from 'react';
 
 interface User {
    id: number;
    name: string;
 }
 
 function UserName({ userPromise }: { userPromise: Promise<User> }) {
    // useはPromiseが解決されるまでSuspenseをトリガーする
    const user = use(userPromise);
    return <p>ユーザ名: {user.name}</p>;
 }
 
 function App() {
    const userPromise = fetch('/api/user').then(res => res.json() as Promise<User>);
 
    return (
       <Suspense fallback={<p>読み込み中...</p>}>
          <UserName userPromise={userPromise} />
       </Suspense>
    );
 }
 </syntaxhighlight>
*: <br>
* <code>useActionState</code>
*: Server Actionsの実行状態と結果を管理するHookである。
*: フォームの送信処理で使用し、アクションの実行状態 (pending)、前回の実行結果、アクション関数を返す。
*: <syntaxhighlight lang="typescript">
 'use client';
 import { useActionState } from 'react';
 
 async function submitForm(prevState: string, formData: FormData): Promise<string> {
    const name = formData.get('name') as string;
    return `送信完了: ${name}`;
 }
 
 function ContactForm() {
    const [message, formAction, isPending] = useActionState(submitForm, '');
 
    return (
       <form action={formAction}>
          <input name="name" type="text" placeholder="名前" />
          <button type="submit" disabled={isPending}>
             {isPending ? '送信中...' : '送信'}
          </button>
          {message && <p>{message}</p>}
       </form>
    );
 }
 </syntaxhighlight>
*: <br>
* <code>useFormStatus</code>
*: 親フォームの送信状態を読み取るHookである。
*: フォームの子コンポーネント内で使用し、送信中かどうかを示す <code>pending</code> フラグ等を取得できる。
*: <syntaxhighlight lang="typescript">
 'use client';
 import { useFormStatus } from 'react-dom';
 
 function SubmitButton() {
    // 親フォームの送信状態を読み取る
    const { pending } = useFormStatus();
 
    return (
       <button type="submit" disabled={pending}>
          {pending ? '送信中...' : '送信'}
       </button>
    );
 }
 
 function ContactForm() {
    async function handleSubmit(formData: FormData) {
       'use server';
       // Server Actionの処理
    }
 
    return (
       <form action={handleSubmit}>
          <input name="email" type="email" />
          <SubmitButton />
       </form>
    );
 }
 </syntaxhighlight>
*: <br>
* <code>useOptimistic</code>
*: 非同期処理の完了を待たずに、UIを楽観的に更新するHookである。
*: ユーザのアクションに対して即座にUIを更新し、処理が完了したら実際の結果を反映する。
*: 処理が失敗した場合は自動的に元の状態に戻る。
*: <syntaxhighlight lang="typescript">
 'use client';
 import { useOptimistic, useState } from 'react';
 
 interface Message {
    id: number;
    text: string;
    sending?: boolean;
 }
 
 async function sendMessageToServer(text: string): Promise<Message> {
    // サーバへの送信処理 (省略)
    return { id: Date.now(), text };
 }
 
 function MessageList() {
    const [messages, setMessages] = useState<Message[]>([]);
    const [optimisticMessages, addOptimisticMessage] = useOptimistic<Message[], Message>(
       messages,
       (state, newMessage) => [...state, newMessage]
    );
 
    async function handleSubmit(formData: FormData) {
       const text = formData.get('message') as string;
       const tempMessage: Message = { id: -1, text, sending: true };
 
       // 楽観的に即座にUIを更新する
       addOptimisticMessage(tempMessage);
 
       // 実際のサーバ処理
       const savedMessage = await sendMessageToServer(text);
       setMessages(prev => [...prev, savedMessage]);
    }
 
    return (
       <div>
          <ul>
             {optimisticMessages.map(msg => (
                <li key={msg.id} style={{ opacity: msg.sending ? 0.5 : 1 }}>
                   {msg.text} {msg.sending && '(送信中...)'}
                </li>
             ))}
          </ul>
          <form action={handleSubmit}>
             <input name="message" type="text" />
             <button type="submit">送信</button>
          </form>
       </div>
    );
 }
 </syntaxhighlight>
<br>
==== ref as prop ====
React 19では、<code>ref</code> を通常のpropとして関数コンポーネントに渡せるようになった。<br>
これにより、React 18以前で必要であった <code>forwardRef</code> のラッパーが不要になった。<br>
<br>
* React 18以前 (<code>forwardRef</code> が必要)
*: <syntaxhighlight lang="typescript">
 import { forwardRef, useRef } from 'react';
 
 // React 18以前 : forwardRefでラップする必要があった
 const TextInput = forwardRef<HTMLInputElement, { placeholder?: string }>(
    ({ placeholder }, ref) => {
       return <input ref={ref} placeholder={placeholder} />;
    }
 );
 TextInput.displayName = 'TextInput';
 
 function Form() {
    const inputRef = useRef<HTMLInputElement>(null);
 
    const focusInput = () => {
       inputRef.current?.focus();
    };
 
    return (
       <div>
          <TextInput ref={inputRef} placeholder="入力してください" />
          <button onClick={focusInput}>フォーカス</button>
       </div>
    );
 }
 </syntaxhighlight>
*: <br>
* React 19 (<code>forwardRef</code> 不要)
*: <syntaxhighlight lang="typescript">
 import { useRef, Ref } from 'react';
 
 interface TextInputProps {
    placeholder?: string;
    ref?: Ref<HTMLInputElement>;
 }
 
 // React 19 : refを通常のpropとして受け取れる
 function TextInput({ placeholder, ref }: TextInputProps) {
    return <input ref={ref} placeholder={placeholder} />;
 }
 
 function Form() {
    const inputRef = useRef<HTMLInputElement>(null);
 
    const focusInput = () => {
       inputRef.current?.focus();
    };
 
    return (
       <div>
          <TextInput ref={inputRef} placeholder="入力してください" />
          <button onClick={focusInput}>フォーカス</button>
       </div>
    );
 }
 </syntaxhighlight>
<br>
React 18以前に <code>forwardRef</code> を使用して作成した既存のコンポーネントは、React 19でも引き続き動作する。<br>
<u>ただし、<code>forwardRef</code> は将来的に非推奨となる予定であるため、新規に作成するコンポーネントでは <code>ref as prop</code> の形式を使用することを推奨する。</u><br>
<br><br>

== 関連情報 ==
* [[Reactの基礎 - useState]]
* [[Reactの基礎 - useEffect]]
* [[Reactの基礎 - useRef]]
* [[Reactの基礎 - useContext]]
* [[Reactの基礎 - useReducer]]
* [[Reactの基礎 - カスタムHook]]
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板,React,Hooks,useState,useEffect,useRef,useContext,useReducer,useMemo,useCallback,TypeScript,TSX,関数コンポーネント,React 19,use,useActionState,useFormStatus,useOptimistic,forwardRef
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Rust]][[カテゴリ:Web]]