ReactのuseEffectフックは、副作用（API呼び出し、イベントの購読など）を扱うためのものです。useEffectは2つの引数を取ります：副作用を実行する関数と、その副作用が依存する値の配列（依存配列）。この記事では、useEffectの依存配列とその使い方、そしてその落とし穴について解説します。
useEffectとは？
useEffectはReactのフックの一つで、副作用を扱うためのものです。副作用とは、関数の外部に影響を与える操作のことで、例えばAPIからデータをフェッチする、イベントリスナーを設定するなどがあります。
useEffectフックは、コンポーネントのレンダリング後に副作用を実行します。また、特定の値に依存する副作用を扱うこともできます。
依存配列とは？
useEffectの第二引数として与えられる配列を依存配列と呼びます。この配列には、副作用が依存する値を列挙します。依存配列の値が変更されると、副作用は再度実行されます。
依存配列を正しく使用することで、不要な副作用の実行を防ぎ、パフォーマンスを向上させることができます。
依存配列の使い方
以下に、useEffectと依存配列の基本的な使い方を示します。
useEffect(() => {
// 副作用を実行する関数
}, [dependency]); // 依存配列
このコードでは、dependencyが変更されるたびに副作用が実行されます。
依存配列の落とし穴
しかし、依存配列の使い方には注意が必要です。依存配列に列挙された値が変更されない限り、副作用は再度実行されません。これは、副作用が最新の値を必要とする場合に問題となることがあります。
また、依存配列に関数を直接列挙すると、その関数が再レンダリングごとに新しい参照を持つため、副作用が不必要に再実行されることがあります。この問題を避けるためには、関数をuseCallbackフックでラップするか、関数を依存配列から除外し、副作用内で最新の関数を参照するようにすることが推奨されます。
まとめ
ReactのuseEffectフックと依存配列は、副作用を効率的に扱うための強力なツールです。しかし、依存配列の使い方には注意が必要で、その使い方を誤ると予期しない挙動を引き起こす可能性があります。依存配列を正しく理解し、適切に使用することで、効率的でバグの少ないコードを書くことができます。
コメント