副作用を実行・制御するReactの機能
副作用 = API通信やsetTmeout、console.logなどの処理のこと
副作用の定義は諸説あるが、以下の定義がしっくり来る
・jsxのレンダリング(ページ表示)に直接的に影響しない関数
・引数以外の要因で結果が変わってしまう関数
・関数の外に影響を与えてしまう関数
関数型コンポーネントでは決まった引数に対して決まったjsx情報を返すのがお作法になっている
=> レスポンスが毎回変わるようなAPI通信やページ表示とは直接関係のない処理はuseEffectの中にまとめておくのが一般的
※ 副作用だからなるべく書いちゃいけない処理というわけではなく、あくまでページ表示には直接関係ない処理という意味なので注意!(ページ表示に間接的に関わる重要な処理っていう認識が大事!)
useEffectを使うことで、ページレンダリング完了後まで対象処理の実行を遅らせることができる
useEffect内に副作用となる処理を含めることでデータ取得した結果をsetStateでコンポーネントをレンダリングさせたりする
※ useEffectの第2引数に何も指定しないと、レンダリングされる度に実行されることに注意!
初回レンダリング
⇒ useEffect実行