useEffectを自分流に簡潔にまとめてみる

useEffectについて調べてみると結構面白かったので、useEffectについての記事を書いていきます。

useEffectのエフェクトって？

そもそもエフェクトとは何なのでしょうか？エフェクトとは、副作用のことを指すのです。
副作用とは、実行されている関数の範囲外の何かに影響を与えるものです。
例としては、バックエンドサーバーからAPIを呼び出したり、setTimeout関数などのどんな値が返ってくるか分からない関数を呼び出すことが挙げられます。

しかし、このような関数と、どんな値が返ってくるか予め分かっている関数（純粋関数）と一緒に使うと、思わぬ処理をしてしまう可能性があります。
できれば、副作用は純粋関数のレンダリング後にやった方がいいですよね。
そこで必要になってくるのがuseEffectなんです。
useEffectは、外界と対話するためのツールでありながら、それが含まれるコンポーネントのレンダリングやパフォーマンスには影響を与えないんです。

useEffectの使い方

useEffectの使い方は、以下のように使います。

import { useEffect } from 'react'

function GetPostTitle({ title }){
    useEffect(() => {
        document.title = title;
    }, [title]);

    return <h1>{title}</h1>

今回の例で言えば、スコープ外の値であるtitleによってブログのタイトルをブラウザのタブのタイトルにするコードです。
手順としては、
1.useEffectをインポートする
2.関数と配列の２つの引数を渡す

1は説明はいらないでしょう。
2の関数と配列の２つの引数を渡す、ということに関してですが、どんな配列を渡せばいいのでしょうか？
それは、依存関係配列と呼ばれるものです。
今回で言えば、スコープ外の値であるtitleという値を変更しているため、このtitleという値に依存関係が発生します。そのため、titleという値が第二引数として格納されます。
この配列で行われていることは、値がレンダリングされたときに値が変わっているかどうかを確認することです。変更されている場合は、useEffect関数が実行されます。

もし第二引数が空配列だとしたら、useEffectは初回レンダー後のみ呼び出されることになります。

今後の展望

今後の展望としては、こちらの記事を読んで、さらなるuseEffectについて調べていこうと思います。

【参考記事】