Reactは、フロントエンド開発の分野で多くの開発者に支持されているJavaScriptライブラリです。その中でもReact Hooksは、Reactの16.8バージョンで導入され、関数コンポーネントで状態管理やライフサイクル管理を可能にする機能として、Reactの開発スタイルに革命をもたらしました。それ以前のクラスベースコンポーネントでの課題を解決し、よりシンプルかつ柔軟な開発を実現します。本記事では、React Hooksの基本概念から実践的な使い方までを徹底的に解説し、初心者から中級者へとステップアップするための知識を提供します。
React Hooksとは？基本概念を理解する
React Hooksは、関数コンポーネント内でReactの状態管理やライフサイクルイベントを利用できるようにする仕組みです。React 16.8で導入され、クラスベースコンポーネントの煩雑さを解消し、より簡潔で直感的なコードの記述を可能にしました。
React Hooksの目的
React Hooksの主な目的は以下の通りです。
- 関数コンポーネントの拡張：Hooksによって、関数コンポーネントでも状態や副作用の管理が可能になります。
- コードの簡潔化：クラスベースコンポーネントに比べ、Hooksはコードを短く保つことができます。
- 再利用性の向上：カスタムフックを用いることで、ロジックを簡単に再利用できます。
代表的なReact Hooks
React Hooksにはいくつかの種類があり、それぞれが特定の機能を提供します。
- useState: 状態を管理するための基本的なフック。
- useEffect: 副作用を管理するためのフック。
- useContext: グローバル状態の共有を可能にするフック。
- useReducer: 複雑な状態管理に対応するフック。
React Hooksの制約
React Hooksを使用する際には以下のルールを守る必要があります。
- トップレベルでのみ呼び出す: 関数のループや条件分岐の中では呼び出さないこと。
- React関数内でのみ使用する: HooksはReactコンポーネントやカスタムフックの内部でのみ利用可能です。
HooksはReactの進化において重要なステップであり、その基本概念を理解することで、より効果的にReact開発を進めることができます。
useStateフック：状態管理の基本
useStateはReactで最も基本的なフックであり、コンポーネントの状態を管理するために使用されます。このフックを使用すると、クラスコンポーネントのようにthis.stateやthis.setStateを使用せず、関数コンポーネント内で簡潔に状態を定義し、更新できます。
useStateの基本的な使い方
useStateは、初期状態を引数に取り、現在の状態とその状態を更新する関数を返します。
構文例:
const [state, setState] = useState(initialState);state: 現在の状態値。setState: 状態を更新するための関数。
例: カウンターの実装
以下は、クリックするたびにカウントが増加するカウンターの例です。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 初期値を0に設定
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>増加</button>
</div>
);
}
export default Counter;useStateのポイント
- 初期状態の設定: 初期状態は任意のデータ型が設定可能（文字列、数値、オブジェクト、配列など）。
const [name, setName] = useState("John");
const [items, setItems] = useState([]);- 非同期的な動作: 状態の更新は非同期的に行われるため、最新の状態を反映する際には注意が必要です。
- オブジェクトや配列の状態更新: 状態がオブジェクトや配列の場合は、スプレッド構文を使用して状態を部分的に更新します。
const [user, setUser] = useState({ name: "John", age: 30 });
setUser((prevUser) => ({ ...prevUser, age: 31 }));useStateの活用例
フォーム入力の状態管理
function Form() {
const [inputValue, setInputValue] = useState("");
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<p>入力された値: {inputValue}</p>
</div>
);
}useStateは、シンプルな状態管理から複雑なデータの扱いまで、幅広いシーンで活用されます。その柔軟性と直感的な使い方を習得することは、React Hooksをマスターする第一歩です。
useEffectフック：副作用の管理
useEffectは、Reactコンポーネント内で副作用（side effects）を管理するためのフックです。副作用とは、データの取得やDOMの操作、タイマーの設定など、Reactのレンダリング以外の処理を指します。useEffectを適切に利用することで、クリーンで効率的なコードを実現できます。
useEffectの基本構文
useEffectは2つの引数を受け取ります。
- 副作用のロジックを記述する関数（必須）。
- 副作用を再実行する条件を指定する依存配列（省略可能）。
基本構文:
useEffect(() => {
// 副作用の処理
return () => {
// クリーンアップ処理（省略可能）
};
}, [dependencies]);- 第一引数: 実行したい副作用のロジック。
- 第二引数: 副作用を再実行する条件を指定する配列。空配列の場合、一度だけ実行されます。
基本的な例：データ取得
以下は、データを取得し、コンポーネントがマウントされたときに一度だけ実行する例です。
import React, { useEffect, useState } from 'react';
function DataFetcher() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => setData(data));
}, []); // 空配列で依存関係なし = 初回レンダリング時に一度だけ実行
return (
<div>
<h1>データ一覧</h1>
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
export default DataFetcher;依存配列を活用した更新処理
依存配列を指定することで、副作用の再実行を細かく制御できます。
例: フィルター条件が変更されたときのみ再実行
function FilteredList({ filter }) {
useEffect(() => {
console.log(`フィルターが更新されました: ${filter}`);
}, [filter]); // filterが変更されたときのみ再実行
}クリーンアップ処理
useEffect内で設定したタイマーやイベントリスナーは、不要になったときに削除する必要があります。これをクリーンアップ処理で実現します。
例: タイマーのクリーンアップ
function Timer() {
useEffect(() => {
const interval = setInterval(() => {
console.log('タイマー作動中');
}, 1000);
return () => {
clearInterval(interval); // クリーンアップ処理
console.log('タイマー停止');
};
}, []); // 一度だけ実行
}useEffectの注意点
- 依存配列を正しく設定する: 必要な変数だけを依存配列に追加し、不要な再実行を避ける。
- 状態更新による無限ループを防ぐ: 副作用内で状態を更新する場合、依存関係を適切に管理する。
- 非同期処理の管理: データ取得などの非同期処理では、クリーンアップ処理を忘れない。
活用例: ウィンドウサイズの追跡
function WindowSizeTracker() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize); // クリーンアップ
};
}, []); // 初回のみリスナーを設定
return <p>現在のウィンドウ幅: {width}px</p>;
}useEffectは、正しく使うことでコンポーネントの動作を細かく制御できます。適切な依存配列の設定とクリーンアップ処理を意識し、安定したコードを目指しましょう。
カスタムフックの作成と活用方法
カスタムフックは、React Hooksのロジックを再利用可能な形に抽出する方法です。同じ機能を複数のコンポーネントで使いたい場合に、コードの重複を防ぎ、可読性と保守性を向上させるために利用します。カスタムフックは通常のJavaScript関数として作成され、他のフックを内部で利用することができます。
カスタムフックの基本構造
カスタムフックは、useで始まる名前を付けるのが一般的です。内部では、useStateやuseEffectなどの他のフックを使用します。
基本構文例:
function useCustomHook() {
const [state, setState] = useState(initialValue);
useEffect(() => {
// フックのロジック
}, []);
return state; // 必要な値を返す
}例: ウィンドウ幅を取得するカスタムフック
以下は、ウィンドウの幅を追跡するためのカスタムフックの例です。このフックを使えば、複数のコンポーネントで簡単にウィンドウ幅を利用できます。
カスタムフックの定義:
import { useState, useEffect } from 'react';
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize); // クリーンアップ
}, []);
return width;
}
export default useWindowWidth;カスタムフックの利用:
import React from 'react';
import useWindowWidth from './useWindowWidth';
function ExampleComponent() {
const width = useWindowWidth();
return <p>ウィンドウの幅: {width}px</p>;
}カスタムフックで複数の値を返す
必要に応じて、複数の値をオブジェクトや配列で返すことができます。
例: フォームの状態を管理するカスタムフック
function useForm(initialValues) {
const [values, setValues] = useState(initialValues);
const handleChange = (event) => {
const { name, value } = event.target;
setValues((prevValues) => ({ ...prevValues, [name]: value }));
};
return { values, handleChange };
}
// 使用例
function LoginForm() {
const { values, handleChange } = useForm({ username: '', password: '' });
return (
<form>
<input
type="text"
name="username"
value={values.username}
onChange={handleChange}
/>
<input
type="password"
name="password"
value={values.password}
onChange={handleChange}
/>
</form>
);
}カスタムフックの活用例
- APIデータの取得
function useFetch(url) {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then((response) => response.json())
.then((data) => setData(data))
.catch((err) => setError(err))
.finally(() => setLoading(false));
}, [url]);
return { data, error, loading };
}
// 使用例
function DataComponent() {
const { data, error, loading } = useFetch('https://api.example.com/data');
if (loading) return <p>読み込み中...</p>;
if (error) return <p>エラー: {error.message}</p>;
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}- ダークモードの切り替え
function useDarkMode() {
const [isDarkMode, setIsDarkMode] = useState(false);
const toggleDarkMode = () => setIsDarkMode((prevMode) => !prevMode);
return { isDarkMode, toggleDarkMode };
}
function DarkModeToggle() {
const { isDarkMode, toggleDarkMode } = useDarkMode();
return (
<button onClick={toggleDarkMode}>
{isDarkMode ? 'ライトモードに切り替え' : 'ダークモードに切り替え'}
</button>
);
}カスタムフックのメリット
- コードの再利用性を向上させる。
- コンポーネントの責務を分離し、より簡潔に保つ。
- 状態管理やロジックを統一的に扱える。
カスタムフックを活用することで、コードの可読性が向上し、プロジェクト全体が効率的に管理できるようになります。小さなフックから始め、徐々に複雑なロジックを扱うフックに拡張していくことをお勧めします。
useContextフックでの状態共有
ReactのuseContextフックは、コンポーネントツリー内でデータを効率的に共有するための仕組みを提供します。これにより、従来の「プロップスドリリング（props drilling）」の問題を解決し、コンポーネント間で直接状態や値をやり取りできます。
useContextの基本構造
useContextは、ReactのContext APIと組み合わせて使用します。Contextを作成し、そのデータを子コンポーネントに提供し、useContextフックを用いてデータを取得します。
基本的な流れ:
- Contextを作成する。
- Context.Providerを使い、データを供給する。
- 子コンポーネントで
useContextフックを使用してデータを取得する。
基本例: テーマ切り替え
1. Contextの作成
import React, { createContext, useState } from 'react';
const ThemeContext = createContext();
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
export default ThemeContext;2. Contextの利用
子コンポーネントでuseContextフックを用いてテーマデータを取得します。
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';
function ThemeToggleButton() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
現在のテーマ: {theme === 'light' ? 'ライトモード' : 'ダークモード'}
</button>
);
}
export default ThemeToggleButton;3. コンポーネントの構成
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import ThemeToggleButton from './ThemeToggleButton';
function App() {
return (
<ThemeProvider>
<div>
<h1>テーマ切り替えアプリ</h1>
<ThemeToggleButton />
</div>
</ThemeProvider>
);
}
export default App;useContextの利点
- プロップスドリリングの解消: 中間のコンポーネントにデータを渡す必要がなくなります。
- コードの簡潔化: 状態共有のための冗長なコードを削減できます。
- リアクティブなデータ共有: Context内の値が変更されると、それを使用している全てのコンポーネントが自動的に再レンダリングされます。
複数のContextを利用する場合
複数のContextを組み合わせる場合、useContextをそれぞれのContextに対して使用します。
例: ユーザー情報とテーマを共有
const UserContext = createContext();
const ThemeContext = createContext();
function CombinedComponent() {
const user = useContext(UserContext);
const { theme } = useContext(ThemeContext);
return (
<div>
<p>ユーザー: {user.name}</p>
<p>テーマ: {theme}</p>
</div>
);
}注意点
- Contextの乱用を避ける: すべての状態をContextで管理すると、パフォーマンスの低下やコードの複雑化につながる可能性があります。必要な範囲で使用しましょう。
- パフォーマンスの最適化: Contextの値が頻繁に更新される場合、メモ化やReducerとの併用を検討してください。
応用例: グローバル言語設定
以下は、アプリケーション全体で言語設定を管理する例です。
LanguageContextの作成
const LanguageContext = createContext();
export function LanguageProvider({ children }) {
const [language, setLanguage] = useState('ja');
const switchLanguage = (lang) => setLanguage(lang);
return (
<LanguageContext.Provider value={{ language, switchLanguage }}>
{children}
</LanguageContext.Provider>
);
}
export default LanguageContext;利用例
import React, { useContext } from 'react';
import LanguageContext from './LanguageContext';
function LanguageSwitcher() {
const { language, switchLanguage } = useContext(LanguageContext);
return (
<div>
<p>現在の言語: {language}</p>
<button onClick={() => switchLanguage('en')}>英語に切り替え</button>
<button onClick={() => switchLanguage('ja')}>日本語に切り替え</button>
</div>
);
}useContextを活用することで、アプリケーション全体の状態管理がより効率的になり、シンプルでスケーラブルな設計を実現できます。
React Hooksのベストプラクティス
React Hooksは強力で柔軟な機能ですが、適切に使用しないとコードが複雑になったり、パフォーマンスに影響を与える可能性があります。以下では、React Hooksを効率的に活用するためのベストプラクティスを紹介します。
1. フックはルールを守る
React Hooksを正しく使用するには、以下のルールを必ず守る必要があります。
- トップレベルで呼び出す: Hooksはループや条件分岐の内部で呼び出さず、常にコンポーネントやカスタムフックのトップレベルで使用してください。
- React関数内で呼び出す: HooksはReactコンポーネントまたはカスタムフックの中でのみ使用可能です。
例（誤った使用法）
if (someCondition) {
const [state, setState] = useState(0); // 条件内で呼び出してはいけない
}例（正しい使用法）
const [state, setState] = useState(0);
if (someCondition) {
// stateを利用するロジックを書く
}2. 依存配列を適切に設定する
useEffectやuseCallback、useMemoで依存配列を正しく指定しないと、意図しない再レンダリングやバグが発生する可能性があります。
- 必要な依存関係をすべて依存配列に含める。
- 未使用の依存関係を防ぐために、ESLintのルールを導入するのがおすすめです。
例
useEffect(() => {
console.log('Count:', count);
}, [count]); // countを依存配列に含める3. カスタムフックでロジックを分離する
複雑なロジックや状態管理は、カスタムフックに抽出してコードを整理しましょう。これにより、再利用性と可読性が向上します。
例: APIデータ取得のカスタムフック
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((response) => response.json())
.then((data) => setData(data));
}, [url]);
return data;
}4. useMemoとuseCallbackでパフォーマンスを最適化
頻繁に再レンダリングされるコンポーネントや高負荷な計算を行う場合、useMemoとuseCallbackを使用してパフォーマンスを向上させましょう。
- useMemo: 計算結果をメモ化する。
- useCallback: 関数をメモ化して再生成を防ぐ。
例
const memoizedValue = useMemo(() => expensiveComputation(data), [data]);
const memoizedCallback = useCallback(() => handleAction(input), [input]);5. 状態の更新に関数型を活用する
状態更新関数に前の状態を引数として渡す関数型を使用すると、状態更新が意図しない順序で行われる問題を防げます。
例
setCount((prevCount) => prevCount + 1);6. クリーンアップ処理を忘れない
useEffectで登録したイベントリスナーやタイマーは、コンポーネントがアンマウントされる際に適切にクリーンアップする必要があります。
例
useEffect(() => {
const timer = setInterval(() => console.log('タイマー動作中'), 1000);
return () => clearInterval(timer); // クリーンアップ
}, []);7. 必要に応じてReducerを利用する
複雑な状態管理が必要な場合、useReducerを使うことでコードの明確さと保守性を向上させることができます。
例
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
const [state, dispatch] = useReducer(reducer, { count: 0 });8. 必要以上にHooksを使いすぎない
すべての状態管理やロジックをHooksで行おうとせず、必要に応じてライブラリや他の設計パターンを採用することも考慮しましょう。
まとめ
React Hooksは、Reactの機能を強力にする一方で、適切に使わないとパフォーマンスや可読性の問題を引き起こします。本記事で紹介したベストプラクティスを活用して、効率的でスケーラブルなReactアプリケーションを構築しましょう。
トラブルシューティング：よくある問題と解決策
React Hooksを使用する際、初心者から経験者まで、様々な問題に直面することがあります。本セクションでは、React Hooksを使用する際によく発生するエラーや問題を取り上げ、それらの解決策を解説します。
1. useEffectの依存配列に関する問題
問題例: 依存配列に必要な値を含めていない場合、想定外の動作やバグが発生します。
コード例:
useEffect(() => {
fetchData(id); // idが変更されてもfetchDataが再実行されない
}, []); // idを依存配列に含めていない解決策: 依存配列にすべての必要な値を含める。
useEffect(() => {
fetchData(id);
}, [id]); // idが変更されたらfetchDataを再実行ヒント: ESLintのルールを有効にして、依存配列の設定ミスを検出しましょう。
2. useStateによる状態の非同期更新
問題例: 状態が即時更新されることを期待すると、最新の状態が取得できないことがあります。
コード例:
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1); // 古いcount値を使用
setCount(count + 1); // 状態は1回しか更新されない
};解決策: 状態の更新には関数型の引数を使い、以前の状態を安全に参照する。
const increment = () => {
setCount((prevCount) => prevCount + 1);
setCount((prevCount) => prevCount + 1); // 正しく2回更新される
};3. useEffectが無限ループする
問題例: 副作用内で状態を更新し、その状態が依存配列に含まれる場合、無限ループが発生します。
コード例:
useEffect(() => {
setData(data + 1); // dataを更新するとuseEffectが再実行され続ける
}, [data]);解決策: 必要な条件を追加して状態の更新を制御する。または、不要な依存を避ける。
useEffect(() => {
if (condition) {
setData((prevData) => prevData + 1);
}
}, [condition]); // 必要な依存だけを指定4. カスタムフックで状態が共有される問題
問題例: カスタムフックが複数のコンポーネントで同じ状態を共有してしまうことを期待するが、そうならない。
原因: React Hooksは各コンポーネントインスタンスごとに独立した状態を持つ。
解決策: 状態をグローバルに共有する場合、Contextや外部状態管理ライブラリを使用する。
const MyContext = createContext();
function MyProvider({ children }) {
const [state, setState] = useState(0);
return (
<MyContext.Provider value={{ state, setState }}>
{children}
</MyContext.Provider>
);
}
function useSharedState() {
return useContext(MyContext);
}5. メモ化の不十分な利用でパフォーマンスが低下
問題例: useCallbackやuseMemoを使用しない場合、毎回新しい関数や値が生成され、再レンダリングが増える可能性があります。
解決策: 再レンダリングを減らすために必要に応じてuseCallbackとuseMemoを使用する。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);6. クリーンアップ処理の不足
問題例: コンポーネントのアンマウント時にタイマーやイベントリスナーが正しく解除されず、メモリリークが発生する。
解決策: useEffect内でクリーンアップ処理を定義する。
useEffect(() => {
const interval = setInterval(() => console.log('動作中'), 1000);
return () => clearInterval(interval); // クリーンアップ処理
}, []);7. 状態管理の複雑化による混乱
問題例: 多数のuseStateを使用して状態管理が煩雑になる。
解決策: 複雑な状態管理にはuseReducerを使用して明確化する。
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
throw new Error();
}
}
const [state, dispatch] = useReducer(reducer, { count: 0 });まとめ
React Hooksは強力な機能ですが、正しく使用しないとパフォーマンスや意図しない挙動につながる可能性があります。本記事で紹介したトラブルシューティングのポイントを活用して、React Hooksをより効率的に活用しましょう。問題が発生した場合には、コードを見直し、必要に応じて依存配列やクリーンアップ処理を確認することを忘れないでください。
応用編：useReducerとuseMemoの活用
ReactのuseReducerとuseMemoは、状態管理の効率化やパフォーマンスの最適化に役立つ高度なフックです。このセクションでは、それぞれの特性と活用例を通じて、実践的な使い方を解説します。
useReducerの活用：複雑な状態管理
useReducerは、複雑な状態管理が必要な場合や、useStateでは処理が冗長になる場合に適しています。Reduxのようなリデューサーパターンを簡易的に実現できます。
基本構文:
const [state, dispatch] = useReducer(reducer, initialState);- state: 現在の状態。
- dispatch: アクションを発行するための関数。
- reducer: 状態を更新するための関数（
(state, action) => newStateの形）。
例: ショッピングカート管理
import React, { useReducer } from 'react';
const initialState = { items: [], total: 0 };
function reducer(state, action) {
switch (action.type) {
case 'add':
return {
...state,
items: [...state.items, action.item],
total: state.total + action.item.price,
};
case 'remove':
return {
...state,
items: state.items.filter((_, index) => index !== action.index),
total: state.total - state.items[action.index].price,
};
default:
throw new Error('Unknown action type');
}
}
function ShoppingCart() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<h2>ショッピングカート</h2>
<ul>
{state.items.map((item, index) => (
<li key={index}>
{item.name} - ${item.price}{' '}
<button onClick={() => dispatch({ type: 'remove', index })}>
削除
</button>
</li>
))}
</ul>
<p>合計: ${state.total}</p>
<button
onClick={() =>
dispatch({ type: 'add', item: { name: '商品A', price: 100 } })
}
>
商品Aを追加
</button>
</div>
);
}
export default ShoppingCart;useMemoの活用：パフォーマンスの最適化
useMemoは、重い計算処理の結果をメモ化し、不要な再計算を防ぐために使用します。依存関係が変化しない限り、以前の結果が再利用されます。
基本構文:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);- memoizedValue: メモ化された値。
- computeExpensiveValue: 計算処理を行う関数。
- [a, b]: 再計算を行う条件となる依存配列。
例: フィルタリングされたデータの計算
import React, { useState, useMemo } from 'react';
function FilteredList({ items }) {
const [filter, setFilter] = useState('');
const filteredItems = useMemo(() => {
console.log('フィルタリング中...');
return items.filter((item) =>
item.toLowerCase().includes(filter.toLowerCase())
);
}, [items, filter]); // itemsまたはfilterが変わったときに再計算
return (
<div>
<input
type="text"
placeholder="検索..."
value={filter}
onChange={(e) => setFilter(e.target.value)}
/>
<ul>
{filteredItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
export default FilteredList;useReducerとuseMemoを組み合わせた例
useReducerで状態管理を行い、useMemoで計算処理を効率化する例を示します。
例: タスク管理アプリ
import React, { useReducer, useMemo } from 'react';
const initialState = { tasks: [] };
function reducer(state, action) {
switch (action.type) {
case 'add':
return { tasks: [...state.tasks, action.task] };
case 'remove':
return { tasks: state.tasks.filter((_, index) => index !== action.index) };
default:
throw new Error('Unknown action');
}
}
function TaskManager() {
const [state, dispatch] = useReducer(reducer, initialState);
const completedTasks = useMemo(() => {
console.log('完了済みタスクを計算中...');
return state.tasks.filter((task) => task.completed);
}, [state.tasks]);
return (
<div>
<h2>タスク管理</h2>
<ul>
{state.tasks.map((task, index) => (
<li key={index}>
{task.name} - {task.completed ? '完了' : '未完了'}{' '}
<button onClick={() => dispatch({ type: 'remove', index })}>
削除
</button>
</li>
))}
</ul>
<button
onClick={() =>
dispatch({
type: 'add',
task: { name: `タスク${state.tasks.length + 1}`, completed: false },
})
}
>
タスクを追加
</button>
<h3>完了済みタスク</h3>
<ul>
{completedTasks.map((task, index) => (
<li key={index}>{task.name}</li>
))}
</ul>
</div>
);
}
export default TaskManager;まとめ
useReducerは複雑な状態管理をシンプルにし、useMemoはパフォーマンスの最適化を可能にします。これらを効果的に活用することで、Reactアプリケーションの設計がより強力で効率的なものとなります。必要に応じてこれらを組み合わせて使い、柔軟なアプリケーション構築を目指しましょう。
演習問題：Hooksの実践練習
React Hooksを使った知識を実践するための簡単な演習問題を紹介します。これらの課題を通じて、基本から応用までのHooksの使用方法を復習し、理解を深めましょう。
課題1: カウンターアプリの作成
要件:
- ボタンをクリックするたびにカウントが増加するシンプルなカウンターを作成してください。
useStateを使用して状態を管理します。- 「リセット」ボタンでカウントを0に戻す機能を追加します。
ヒント: useStateの使い方を復習してください。
課題2: APIデータ取得
要件:
- 外部APIからデータを取得して表示するコンポーネントを作成してください。
- データ取得時には「読み込み中…」と表示し、エラーが発生した場合は「エラーが発生しました」と表示します。
useEffectを使用してデータを取得し、useStateで状態を管理します。
ヒント: フェッチ処理をuseEffect内に記述してください。
課題3: テーマ切り替え
要件:
- ダークモードとライトモードを切り替えるアプリを作成してください。
- 現在のテーマは
useContextを使って管理し、全てのコンポーネントで共有します。 - ボタンをクリックすることでテーマを切り替えられるようにします。
ヒント: createContextとuseContextを利用してください。
課題4: タスクリスト管理
要件:
- 新しいタスクを追加し、タスクを完了済みにするボタンを実装してください。
- 状態管理には
useReducerを使用してください。 - 完了済みと未完了のタスクを分けて表示します。
ヒント: Reducer関数を作成し、アクションで状態を更新します。
課題5: パフォーマンス最適化
要件:
- フィルタリングされたリストを表示するアプリを作成してください。
- フィルタリング処理は
useMemoを使用して最適化してください。 - リストが再レンダリングされるのを最小限に抑えます。
ヒント: 依存配列を正しく設定することで、余計な計算を防ぎます。
課題6: カスタムフックの作成
要件:
- ウィンドウの幅を追跡するカスタムフック
useWindowWidthを作成してください。 - このフックを使用して、ウィンドウ幅を表示するコンポーネントを実装します。
ヒント: useStateとuseEffectを組み合わせてカスタムフックを作成します。
まとめと振り返り
演習問題を通じて、React Hooksの基本的な使用方法から、応用的な機能やパフォーマンスの最適化までの知識を実践できます。各課題に取り組むことで、実際の開発でReact Hooksを活用するスキルが身につきます。取り組みが終わったら、コードの可読性や効率性を再度見直し、改善点を考えることも大切です。
まとめ
本記事では、React Hooksの基本概念から応用的な使用方法までを幅広く解説しました。useStateやuseEffectを使った状態管理や副作用の処理から、useContextやuseReducerでの効率的な状態共有、さらにuseMemoやuseCallbackを利用したパフォーマンス最適化の方法まで、React Hooksの全体像を学ぶことができたと思います。
React Hooksは、関数コンポーネントの可能性を広げ、コードをより簡潔で管理しやすいものにします。今回紹介したトラブルシューティングやベストプラクティス、演習問題を通じて、React Hooksをマスターし、実際のプロジェクトで活用してください。効率的でスケーラブルなアプリケーション構築に役立つことを願っています。
コメント