useEffectの依存配列を理解しよう
前回の記事では、useStateを使ってStateを管理する方法について、詳しく見ていきました。
今回は、useEffectについてもう少し詳しく見ていきましょう。
useEffectを使っていると、次のようなコードをよく見かけます。
useEffect(() => {
fetchData();
}, []);ここで気になるのが、最後にある[]ではないでしょうか。
これは依存配列と呼ばれるもので、useEffectが「いつ実行されるのか」を考えるうえで重要な部分です。
この記事では、
- 依存配列とは何なのか
[]を指定するとどうなるのか[id]のように値を指定するとどうなるのかuseStateやuseEffectを複数使う場合
といった内容を、実際のコードを見ながら理解していきましょう。
useEffectの依存配列とは？
さて、以下のuseEffectを見てみましょう。
useEffect(() => {
fetchData();
}, []);最後に、[]があります。
これは依存配列と呼ばれるものです。
依存配列には、
このuseEffectが、どの値の変更に反応するのか
を指定します。
[]の場合
例えば、
useEffect(() => {
fetchData();
}, []);のように空の配列を指定した場合、
初回のレンダー後に実行され、その後の再レンダーでは実行されません。
そのため、
コンポーネントが表示されたときに、一度だけAPIからデータを取得したい
といった処理でよく利用されます。
idを指定するとどうなる？
次のコードを見てみましょう。
useEffect(() => {
fetchData(id);
}, [id]);今度は、[id]となっています。
これは、
idが変わったら、このuseEffectをもう一度実行する
という意味になります。
例えば、ユーザーIDを使ってユーザー情報を取得する場合を考えてみましょう。
id = 1- ユーザー1の情報を取得
その後、
id = 2- ユーザー2の情報を取得
というように、idが変更されたタイミングでAPI通信を行えます。
依存配列は「いつ実行するか」を考える
useEffectを使うときは、
この処理は、いつ実行したいのか？
を考えることが重要です。
例えば、
useEffect(() => {
fetchData();
}, []);なら、
初回にデータを取得したい
という意図があります。
一方、
useEffect(() => {
fetchData(id);
}, [id]);なら、
idが変わったらデータを取得したい
という意図があります。
依存配列を適切に設定しないと、
- API通信が必要以上に発生する
- 処理が何度も実行される
- 意図したタイミングで処理されない
といった問題につながることがあります。
そのため、
このuseEffectは、何が変わったら実行するのか？
を意識するようにしましょう。
useStateとuseEffectは複数使える
一つのコンポーネントの中で、useStateやuseEffectを複数使うこともできます。
例えば、
const [name, setName] = useState("");
const [age, setAge] = useState(0);
useEffect(() => {
// nameに関する処理
}, [name]);
useEffect(() => {
// ageに関する処理
}, [age]);このように、管理するデータや処理ごとに分けることができます。
ただし、コンポーネントが大きくなってきて、コードが複雑になってきた場合は注意が必要です。
その場合は、
- コンポーネントを分割する
- 処理を別の関数に分ける
- カスタムHookを利用する
といった方法があります。
「カスタムHook」という仕組みもReactでは重要ですが、これはもう少しReactに慣れてから学んでも問題ありません。
まずは、
一つのコンポーネントにすべての処理を詰め込まない
という考え方を覚えておきましょう。
まとめ
今回は、useEffectの依存配列について詳しく見ていきました。
依存配列には、useEffectがどの値の変更に反応するのかを指定します。
例えば、
[]→ 初回のレンダー後に実行する[id]→idが変わったときに実行する
というように、依存配列によってuseEffectを実行するタイミングを指定できます。
また、useStateやuseEffectは、一つのコンポーネントの中で複数使うこともできます。
大切なのは、
このuseEffectは、何が変わったら実行するのか？
ということを意識することです。
ここまで理解できれば、useEffectが「なんとなく書くもの」から、「いつ、どんな処理を実行したいのかを考えて使うもの」へと少しずつ変わってくると思います。
コメント