コーディングブログ

Coding Blog

【React hooks】useEffectの使い方

React

Reactでfunction componentを使うとき、
class componentで言う、componentDidMountcomponentWillUnmount
useEffectを使うとfunctionバージョンに置き換えることができます。

基本はドキュメントを見ていただくのが一番理解しやすいと思います。
https://ja.reactjs.org/docs/hooks-effect.html

わかりづらいポイント

componentDidMountcomponentWillUnmountと違い、
どちらの作用も一つのメソッドの中に書くので少しややこしいですが、
下記の通り、それぞれのブロックがあり、そこに記述すれば良いのです。

ここで、componentDidMount と componentWillUnmount とがお互いに鏡のように対応していないといけないことに注意してください。

https://ja.reactjs.org/docs/hooks-effect.html#example-using-hooks-1

このようにuseEffectでも鏡のように対応しているのだと思えば、わかりやすいですね。