カスタムフック
紹介
- Reactでは、カスタムフックを作成することで、複雑なロジックを再利用可能な関数として抽象化できます。
- カスタムフックは、
useStateやuseEffectなどのReactのフックを組み合わせて、状態管理や副作用の処理を行うカスタムのフックを作成します。
使用方法
カスタムフックは通常、useで始まる名前を付ける必要があります。これにより、Reactがそれがフックであることを認識します。
例: カスタムフック useLocalStorage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| import { useState } from 'react';
// カスタムフックの定義
function useLocalStorage(key, initialValue) {
// ローカルストレージから値を取得
const saved = localStorage.getItem(key);
const initial = saved ? JSON.parse(saved) : initialValue;
const [value, setValue] = useState(initial);
// 状態が更新された時にローカルストレージも更新
const setStoredValue = (newValue) => {
setValue(newValue);
localStorage.setItem(key, JSON.stringify(newValue));
};
return [value, setStoredValue];
}
function Example() {
const [name, setName] = useLocalStorage('name', 'John Doe');
return (
<div>
<h1>こんにちは、{name}!</h1>
<button onClick={() => setName('Alice')}>名前を変更</button>
</div>
);
}
|
特徴
- カスタムフックは再利用可能なロジックの集約であり、複数のコンポーネントで同じロジックを使いたい場合に便利です。
- フックの内部でuseStateやuseEffectを使い、状態や副作用を管理できます。
- カスタムフックはコンポーネントに依存せず、どのコンポーネントでも使えるため、コードの重複を減らすのに役立ちます。
注意点
- カスタムフックは通常、コンポーネントの外で定義し、コンポーネント内で使用します。
- カスタムフックもReactのルールに従い、コンポーネント内のトップレベルで使用する必要があります。