今回はuseEffectについてのメモの記事になります。

useEffectとは

画面が表示された後や指定した値が変化したときに処理を実行するためのHookです。

サンプルコードで説明します。

基本形のサンプルコード

SamplePage.tsxのコードが下記になっているとします。

import { useState, useEffect } from 'react';

function SamplePage() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log('画面が初回表示で動作します');
    }, []);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>＋1</button>
        </div>
    );
}

export defautl SamplePage;

6行目〜8行目にuseEffectを使っています。

基本形は下記になります。

useEffect(() => {
    // ここに処理内容を記述する
}, []);

第二引数が「[]」になっていますがこの場合は画面を初めて表示した時に2行目が実行されるという意味になります。

また13行目より「+1」をクリックすると値が1増えますが2行目は実行されません。

初回の画面表示でuseEffectが動作するということです。

第二引数に変数を設定する場合

下記のコードで考えます。

import { useState, useEffect } from 'react';

function SamplePage() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log('countの値が変わるたびに動作します');
    }, [count]);

    return (
        <div>
            <h1>カウント：{count}</h1>
            <button
                type="button"
                onClick={() => setCount(count + 1)}
            >＋1</button>
        </div>
    );
}

export default SamplePage;

useEffectの第二引数が「[]」ではなく「[count]」にしています。

変数countは4行目で設定していて初期値は0です。

「+1」のボタンをクリックするとcountの値が1増えますが今回はuseEffectの第二引数にcountを使っているのでcountが変化するたびにuseEffectが動作します。

第二引数がない場合

下記のコードで考えます。

import { useState, useEffect } from 'react';

function SamplePage() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log('画面を表示するたびに動作します');
    });

    return (
        <div>
            <h1>カウント：{count}</h1>
            <button
                type="button"
                onClick={() => setCount(count + 1)}
            >＋1</button>
        </div>
    );
}

export default SamplePage;

8行目ですが今回はuseEffectの第二引数の設定をしていません

この場合は画面を表示するたびに7行目が動作するという意味になります。