useEffectってなんじゃらホイ

#はじめに

Next.jsのコーディングをしていて、useEffectの動きが今ひとつ分かりませんでした。
そこで、テストプログラムにログを仕込んで、動きを確認してみました。

#useEffectとは

・初回表示時に必ず呼ばれる
・useStateが更新されるたびに呼ばれる
・引数を指定しないと、（ファイル内の？）全てのuseStateが更新される毎にCallされる
・第二引数で、useStateを指定できる。指定したuseStateが更新された時だけ、useEffectが呼ばれる

#Callされる順番

例えば、以下のソースコードを実行するとき

import * as React from 'react';
import {useState, useEffect} from 'react';

export default function Test(){

    console.log("Test() Called");

    useEffect(() =>{
        console.log("useEffect called!!");
    });

    return(
        <>
            {console.log("return called")}
        </>
    )
}

初回表示時、

①Test()

②return

③useEffect

の順に表示される。

#useStateを絡めた順序

次に、useStateを絡めた以下のソースコードを実行するとき

import * as React from 'react';
import {useState, useEffect} from 'react';


let count = 0;
export default function Test(){

    console.log("Test() Called");

    const [add, setAdd]     = useState(0);   //たし算用

    const changeAdd = (e) => {
        count++;
        setAdd(() => count);
    }

    useEffect(() =>{
        console.log("useEffect called!!");
    });

    return(
        <>
            {console.log("return called")}
            <button type="button" onClick = {changeAdd} label={"PiroPiro"} >たし算</button>
        </>
    )
}

useStateを更新すると、再び

①Test()

②return

③useEffect

の順にCallされる。

その後、値に変化があれば
再び①〜③の順にCallされる。

もし、値に変化がなければ

④Test()

⑤return()

の順にCallされ、その後はボタンを押しても何も呼ばれなくなる。

#useEffectの引数

・第１引数には、関数を指定

・第２引数に設定した値によって、挙動が変わる

以下のソースコードで確認

import * as React from 'react';
import {useState, useEffect} from 'react';


let count = 0;
export default function Test(){

    console.log("Test() Called");

    const [add, setAdd]     = useState(0);   //たし算用
    const [mult, setMult]   = useState(0);   //かけ算用

    //たし算する関数
    const changeAdd = (e) => {
        count++;
        setAdd(() => count);
    }

    //かけ算する関数
    const changeMulti = (e) => {
        count *= 2;
        setMult(() => count);
    }

    useEffect(() =>{
        console.log("初回のみuseEffect called!!");
    },[]);

    useEffect(() =>{
        console.log("どんなときもuseEffect called!!");
    });

    useEffect(() =>{
        console.log("たし算時のみuseEffect called!!");
    },[add]);

    useEffect(() =>{
        console.log("かけ算時のみuseEffect called!!");
    },[mult]);

    return(
        <>
            {console.log("return called")}
            <p>たし算の計算結果は{add}です</p>
            <p>かけ算の計算結果は{mult}です</p>
            <button type="button" onClick = {changeAdd} label={"PiroPiro"} >たし算</button>
            <button type="button" onClick = {changeMulti} label={"PiroPiro"}>かけ算</button>
        </>
    )
}

###第２引数について

・指定しない場合・・・全てのuseStateの更新状態を見て、変化があれば第一引数の関数をCall
・[　]を指定した場合・・・初回のみCall
・useStateの値を指定した場合・・・指定したuseStateの値が変化した場合のみ、Callされる。

以上です。
間違いや気づいた点などありましたら、コメントいただけますと助かります！！