5.
ReactHookの基本
React Hookの概要
React Hookとは
React Hook は、CSR で利用できる Reactの関数コンポーネントで 「状態」や「副作用」を扱えるようにする仕組みです。
例えば
- ページ内で カウントを増やすボタンを作る
- 外部APIから データを取得して表示する
| 特徴 | 内容 |
|---|---|
| 関数コンポーネントで使える | クラスは不要 |
| 再利用しやすい | カスタムHookも作れる |
| 状態と副作用を簡潔に記述できる | コードがシンプル |
よく使うHook一覧
Reactでよく利用される Hook です。バージョンアップによってさらにたくさんの機能が追加されています。
| Hook名 | 役割 | 使用例 |
|---|---|---|
useState |
値の状態を管理する | カウント、入力値など |
useEffect |
副作用（データ取得・タイマーなど）を扱う | 初期データ読み込み |
useRef |
DOMや値の参照を保持する | フォーカス制御、前回値の保持 |
useContext |
グローバル状態の共有 | テーマ切替、ログイン状態など |
useMemo |
値のメモ化で再計算を抑える | 計算の最適化 |
useCallback |
関数のメモ化 | 不必要な再レンダリング防止 |
例：useStateでカウントアプリ
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
| 説明 | 内容 |
|---|---|
useState(0) |
count の初期値を0に設定 |
setCount() |
値を更新すると自動で再描画される |
onClick |
クリック時にカウントを+1 |
例：useEffectでデータ取得
import { useEffect, useState } from 'react';
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("/api/users")
.then((res) => res.json())
.then((data) => setUsers(data));
}, []); // ← 空配列で初回のみ実行
return (
<ul>
{users.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}
クリックイベント
メソッドの定義
ボタンをクリックしたら、処理するように修正します。
ChatForm コンポーネントに sendMessage() を追加します。
app/components/ChatForm.tsx
const ChatForm = () => {
const [text, setText] = useState("");
const [submitted, setSubmitted] = useState("");
const sendMessage = () => {
console.log("Sending message!");
};
...
}
ボタンにイベント追加
button タグに onClick イベントを追加し、sendMessageを設定します。
<button
onClick={sendMessage}
className="mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">
Send
</button>
動作確認
ボタンをクリックして、コンソールでイベント実行の確認をします。
