関連記事：React vs Vue.js徹底比較
React Hooksは、関数コンポーネントで状態管理や副作用を扱うための仕組みです。2019年に導入されて以来、Reactの標準的な開発スタイルになっています。
React Hooksとは
以前のReactでは、状態管理にはクラスコンポーネントを使う必要がありました。Hooksの登場により、関数コンポーネントでも同等の機能が使えるようになりました。
Hooksのメリット
- コードがシンプルになる
- ロジックの再利用がしやすい（カスタムHooks）
- クラスの
thisに悩まされない - テストが書きやすい
基本のHooks
useState：状態管理
コンポーネント内で変化する値を管理します。
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(0)}>リセット</button>
</div>
);
}
ポイント：
useState(初期値)で状態変数と更新関数を取得- 更新関数を呼ぶとコンポーネントが再レンダリングされる
- オブジェクトや配列も管理可能
useEffect：副作用の処理
データの取得、DOM操作、タイマーなど、レンダリング以外の処理を行います。
import { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(res => res.json())
.then(data => setUser(data));
// クリーンアップ関数（コンポーネント破棄時に実行）
return () => {
console.log('cleanup');
};
}, [userId]); // userIdが変わるたびに実行
if (!user) return <p>読み込み中...</p>;
return <h1>{user.name}</h1>;
}
依存配列のルール：
[]：マウント時に1回だけ実行[value]：valueが変わるたびに実行- 省略：毎回のレンダリング後に実行（非推奨）
useContext：コンテキストの利用
propsを深くバケツリレーせずに、コンポーネントツリー全体で値を共有できます。
import { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={theme}>ボタン</button>;
}
実践でよく使うHooks
useRef：DOM参照・値の保持
import { useRef } from 'react';
function TextInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>フォーカス</button>
</>
);
}
useMemo・useCallback：パフォーマンス最適化
重い計算やコールバック関数のメモ化に使います。
Tailwind CSS入門も参考にしてください。
import { useMemo, useCallback } from 'react';
function ExpensiveComponent({ items, onSelect }) {
// 重い計算をメモ化
const sortedItems = useMemo(
() => items.sort((a, b) => a.price - b.price),
[items]
);
// コールバック関数をメモ化
const handleClick = useCallback(
(id) => onSelect(id),
[onSelect]
);
return sortedItems.map(item => (
<div key={item.id} onClick={() => handleClick(item.id)}>
{item.name}
</div>
));
}
カスタムHooks
ロジックを再利用可能な形で切り出せます。
function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}
// 使用例
function Settings() {
const [theme, setTheme] = useLocalStorage('theme', 'light');
return <button onClick={() => setTheme('dark')}>ダークモード</button>;
}
学習ロードマップ
- useState と useEffect を使いこなす（3〜5日）
Jestテスト入門も参考にしてください。
- useContext でグローバルな状態管理を学ぶ（2〜3日）
- useRef や useMemo の使い所を理解する（2〜3日）
- カスタムHooks を作ってみる（3〜5日）
- 実際のプロジェクトで組み合わせて使う
まとめ
React Hooksは、まずuseStateとuseEffectの2つをしっかり理解することが重要です。この2つが使えれば、多くのケースに対応できます。慣れてきたらカスタムHooksを作り、ロジックの再利用を進めていきましょう。
