最新のReact hooksに追いつく useEffect編

私ごとですが、最近自作の映画レビューアプリを作ってます。フロントエンドは実務でやってるから問題ないと思ってましたがAIと協力してコーディングをしてると知らないhooksがたくさん…
現場ではクラスコンポーネントだったためそもそもhooksを使ってこなかったし、結構違うもんなんだなと…
ということで今回からはhooksについてまとめていきます。1回目useEffectについてです。

useEffectとは

useEffectはよく副作用という表現をされます。いや、副作用ってなんやねんという感じではあるんですよね。ここでいう副作用とは、レンダー時についでに処理することを指しています！
そのためuseEffectはある特定の処理や、場合の時のみ処理を行いたいと思ったときに役立ちます。

useEffectの書き方

useEffectを扱う際に重要になるのは依存配列です。依存配列はuseEffectの第二引数であり、大きく3種類の書き方ができます。書き方次第で、useEffectの第一引数に渡した処理がどのタイミングで実行されるかが異なります。

依存配列なし

依存配列がない場合、第一引数に渡された処理は毎回のレンダーの際に実行されます。

useEffect(() => {
  console.log("レンダーのたびに実行される");
});

空配列

第二引数に空配列を渡す場合、第一引数に渡された処理は初回レンダー時にのみ実行されます。

useEffect(() => {
  console.log("最初の1回だけ実行される");
}, []);

特定の値が入った配列

第二引数の配列に特定の変数が入っている場合、第一引数に渡された処理は、配列内の変数に変更があった場合に実行されます。

useEffect(() => {
  console.log("countが変わったときだけ実行:", count);
}, [count]);

まとめ

今回はuseEffectに関してまとめてみました。余談ですがこちらを勉強していて、クラスコンポーネントのライフサイクルに従った処理にとても似ていると感じました。
comoponentWillMountやdidUpdateの代わりになっているのかなと。そしてその時よりも使いやすくなっているなと思いました。
次はuseRef編でお会いしましょう