こんにちは。
お久しぶりです。
近況としては引き続きWeb開発案件に参画しています。表題にある通りReactを使用してフロントエンドを行っています。
Web開発実績はC#で1年2カ月しかないですが、今の案件ではAIのお陰でフロントエンドの主力として価値を出せています。
今回はReactの豆知識を以下にまとめて知識の定着を図ろうと思います。
■Reactの豆知識:useEffectの依存配列の秘密
ReactのuseEffectで依存配列を空配列[]にすると、コンポーネントのマウント時のみ実行されます。
しかし、この配列に値を含めると、その値が変更されるたびにエフェクトが再実行されます。
実は、依存配列にオブジェクトや配列を直接渡すと、参照が変わるたびに再実行されてしまいます。
これを防ぐには、useMemoやuseCallbackで値をメモ化するか、依存配列から除外する必要があります。
また、useEffectの戻り値でクリーンアップ関数を返すことで、
コンポーネントのアンマウント時や依存配列の値が変わる前に前回のエフェクトをクリーンアップできます。
これにより、メモリリークを防げます。