ReactにおけるuseEffectの適切な使用方法

2024-02-10 03:49 React useEffect コード例

  1. コンポーネントの初回レンダリング時にのみuseEffectを呼び出す方法: useEffectフックはデフォルトでは初回のレンダリングとその後のすべての再レンダリング時に実行されます。しかし、初回レンダリング時のみに実行したい場合は、第2引数にからの配列[]を渡します。

    useEffect(() => {
 // 初回レンダリング時のみ実行されるコード
}, []);

  2. 特定の値が変更された場合のみuseEffectを呼び出す方法: 特定の値が変更された場合にのみuseEffectを実行したい場合は、第2引数に監視したい値の配列を渡します。

    const value = ...
useEffect(() => {
 // valueが変更された場合のみ実行されるコード
}, [value]);

  3. コンポーネントのアンマウント時にのみuseEffectを呼び出す方法: 特定のクリーンアップ処理を行いたい場合、useEffect内で返される関数を使用します。

    useEffect(() => {
 // マウント時の処理
 return () => {
   // アンマウント時のクリーンアップ処理
 };
}, []);

これらのパターンを適切に組み合わせることで、useEffectフックを効果的に活用することができます。バグやパフォーマンスの問題を回避するために、useEffectの呼び出しタイミングに注意してください。