【React】useEffectについて

Posted on by masumasu

こんにちわ、masumasuです。

向日葵が日毎に背を伸ばすこの頃ですが、皆様いかがお過ごしでしょうか。

今回は、Reactで用いられるuseEffectについて書いていきます。

useEffect

useEffectは、関数コンポーネントがレンダーされた後に副作用を実行するためのフックです。

副作用とは、データのフェッチ、DOMの操作、サブスクリプションの設定や解除など、純粋なレンダリングとは異なる処理を指します。

基本的な使い方

useEffectは、二つの引数を取ります。一つ目は副作用の処理を行う関数、二つ目は依存配列（dependency array）です。

基本的な構文は以下の通りです：

useEffect(() => {
    // 副作用の処理
}, [dependencies]);

例えば、コンポーネントがマウントされたときにデータをフェッチする例を見てみましょう：

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

function DataFetchingComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    return (
        <div>
            {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
        </div>
    );
}

export default DataFetchingComponent;

この例では、コンポーネントが初めてレンダーされた後にデータをフェッチし、dataという状態を更新しています。

依存配列が空であるため、この副作用はコンポーネントがマウントされるたびに一度だけ実行されます。

依存配列の使い方

依存配列には、副作用が再実行されるべき値（状態やプロップス）を指定します。

例えば、特定の状態が変更されたときに副作用を再実行する場合、依存配列にその状態を含めます：

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

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

    useEffect(() => {
        console.log(`Count has changed to: ${count}`);
    }, [count]);

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

export default Counter;

この例では、countが変更されるたびにコンソールにメッセージが表示されます。

まとめ

useEffectは、Reactの関数コンポーネント内で副作用を管理するための基本的な関数です。

ご覧いただきありがとうございます。