はじめに

初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。

今回の目的

前回の続きです。今回は「エフェクトを使って同期を行う」。被る部分もあると思いますが、後で振りかえって深掘りするきっかけになるのが理想です。細かく書くと大変なのであっさりめ。

使用したものや事前準備

・Macbook Pro

主に参考にさせていただいた記事

エフェクトとは

Reactコンポーネント内には２種類のロジックがある
・レンダーコード
　JSXを返す
・イベントハンドラ
　ユーザーアクションによって変化させる

エフェクトは上記２点で完了できない、レンダー自体によって引き起こされる副作用を指定するものである

エフェクトは何らかの外部システムと同期するために使用

エフェクトはおそらく不要なものの時が多い。エフェクトが他のstateをもとにstateを調整しているだけであれば必要ない。

また、useEffectはレンダー後に発火するため下記の場合だと無限ループが発生する。

const [count, setCount] = useState(0);
useEffect(() => {
  setCount(count + 1);
});

依存配列の設定

関係するstateを設定することで、対象のstateによるレンダリングの時のみ発火するように設定できる。

useEffect(() => {
    if (isPlaying) {
      console.log('Calling video.play()');
      ref.current.play();
    } else {
      console.log('Calling video.pause()');
      ref.current.pause();
    }
}, [isPlaying]);

クリーンアップ

Effect内でreturn文を記載するとコンポーネントが破棄されるかuseEffectが再実行される（アンマウント）時に実行される。
連続で実行される場合、クリーンアップで最新の情報のみ取得するため、APIの結果待ちでも取得は最新のみになる。

useEffect(() => {
    const connection = createConnection()
    connection.connect()
    return () => {
      connection.disconnect()
    }
}, [])

クリーンアップが必要だと判断できる時

1.開発環境の２回発生するエフェクトでクラッシュする場合（要素を表示するなど）
2.イベントのリッスン
3.アニメーションの初期化
4.不要なAPIレスポンス

エフェクトの中のfetch

エフェクトの中で行うのが一般的な方法だが、レンダー後にfetchが動くことになることや、並列的な処理ではなくレスポンスを待ってから次の処理を行うケースも増えパフォーマンスが落ちる場合もある。
フレームワークのデータフェッチ機構かオープンソースを使用することも考える。

React公式ページで学んでみた17（備忘録）