classコンポーネントでは、ある決まったタイミングでメソッドを呼ぶことができるライフサイクルメソッドというものがあります。一方で、関数コンポーネント自体にはこのような機能がないため、hooksを利用することになります。
関数コンポーネントでは、hooksのuseEffectがclassコンポーネントにおけるライフサイクルメソッドの代わりになるため、useEffectとライフサイクルメソッドの対応関係をおさえることが重要です。
useEffectの第1引数
useEffectの第1引数には、処理したい内容を記述した関数を渡します。この関数で、例えばクリーンアップする処理を含んだ関数をreturnすれば、マウント時(Mounting)のcomponentWillUnmountメソッドに相当するタイミングで実行されます。
useEffectの第2引数
useEffectでは、第2引数の書きぶりでclassコンポーネントにおけるライフサイクルメソッドのどれと対応するのかが変わります。
useEffect(()=>{
//処理
},【第2引数】);
空の配列の場合:[ ]
コンポーネントの初回レンダリング時に、1度限りで呼ばれます。マウント時(Mounting)のrenderメソッドに相当します。
何も指定しない場合:nothing
コンポーネントがレンダリングされる度に呼ばれます。ただし、このケースはあまり見られません。マウント時(Mounting)のcomponentDidMountメソッドと更新時(Updating)のcomponentDidUpdateメソッドに相当します。
中身のある配列の場合:[data]
コンポーネントの初回レンダリング時に呼ばれるほか、dataが変更される度に呼ばれます。尚、[data,data2,data3...]のように複数要素がある場合は、この内どれか1つでも変更が生じれば呼ばれます。
参考
・Udemy講座「 Modern React with Redux [2020 Update] 」( https://www.udemy.com/course/react-redux/ )
今回、hooksとライフサイクルに関してここで学んだ内容について、備忘録を兼ねて共有させていただきました。hooksはclassコンポーネントの内容を押さえた後に学習するという進め方が効率的だと思います。本講座でも、classコンポーネントの解説がhooksの解説に先行しており、新たな学びにおいて正しい順序で効率的に進めるにも、Udemyの講座は有効だと思います。