useEffectって何になぜ使うの？

まず、useEffectについて簡単な説明からお話しします。

useEffectは、ReactのHook（フック）の中の一つです。

描画(レンダリング)以外の処理の時に使います。例えば、APIとの通信など。

使う理由は、それらの副作用を防止するためです。

APIの通信する処理を書いていた時、描画（レンダリング）されるたびにそのAPIが実行されます。本来であれば初回のみでいいのにもかかわらず、何度も実行される可能性があると言うことです。これが副作用です。

ここで、useEffectを使うことによって、初回のみ実行したり、指定した変数が変わるたびに実行するなど、処理のコントロールができるようになります。

これがuseEffectの利点です。

useEffectはどう使うの？

簡単に使い方説明をします。

例えば下記のように書いた場合、{}の中が画面表示時に実行されます。

  useEffect(() => {
  	///ここに書いた処理が実行される
  }, []);

↑ここの[]が空の時は初回のみ実行

  useEffect(() => {
  	///ここに書いた処理が実行される
  }, [data]);

↑このように[]に変数を入れると、変数の中身がが変化するたびに、{}の中の処理が実行されます。

useEffectをdev環境で使う場合、
useEffectはバグを見つけるために2回実行されます。
※本番環境は一回実行。

useEffectはなぜ嫌われているのか？（嫌われているのかは主観です。）

初回のみでいい通信はサーバコンポーネントに書いた方が良いから。

描画（レンダリング）速度も上がるため、SEOの観点からもこの方が良いと思います。

その例が下記です。こう書くことで、クライアントコンポーネントに外部との通信の処理を書かずに済みます。

"use server"

///外部との通信の処理などを書く
///レスポンスが返ってきたとして
const data = res.data

///それをクライアントコンポーネントに渡す
return(
  <pageView 
    data={data}
  />
)

変数が変わる時でなくて、何か処理を実行した時に関数を呼び出す方が良い。

コントロールしやすいから

"use client"

const handleClick = {
  ///ここにボタンが押された時に実行したい処理を書く
}

return(
  <dev>
     ///ボタンが押された時だけ処理が実行される
     <button onClick={handleClick}>
    </button>
  </dev>
)

終わりに

今回、個人的にuseEffectを使わない方が良いという話をしましたが、今後useEffectを使った方が良い場面を見つけたらまた別の記事で書きたいと思います、

以上、useEffectについてでした、