React Hooksとは？

React Hooksは、Reactの機能をより便利に使えるようにするための特別な機能です。特に、自分のコンポーネントの状態を管理したり、ライフサイクルに関する処理を行ったりするのに最適なツールです。これから、特に多く使われる「useState」と「useEffect」について詳しく説明します。

useStateを使ってみよう

useStateとは？

useStateは、コンポーネントの中で状態を持つためのフックです。状態というのは、コンポーネントがどのようなデータを持っているかということを指します。たとえば、ボタンをクリックしてカウントを増やすアプリを作るときを考えてみましょう。

使い方

以下のコードを見てみましょう。

import React, { useState } from 'react';

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

    return (
        

            
現在のカウント: {count}
             setCount(count + 1)}>カウントを増やす
        
    );
}

この例では、最初にカウントを0に設定し、ボタンを押すごとにカウントを1つ増やしています。

useEffectを使ってみよう

useEffectとは？

useEffectは、コンポーネントが描画されたときや状態が変わったときに特定の処理を実行するためのフックです。例えば、データをAPIから取得したり、コンポーネントがアンマウントされるときにクリーンアップを行ったりするのに使います。

使い方

次に、APIからデータを取得する簡単な例を見てみます。

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

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

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []); // 空の配列を渡すことで、一度だけ実行される

    return (
        

            {data ? 
データ: {JSON.stringify(data)}
 : 
データを読み込み中...
}
        
    );
}

このコードでは、コンポーネントが最初に描画されたときにAPIからデータを取得しています。データが取得できたら、それを表示します。

まとめ

ReactのHooksを使うことで、コンポーネントの状態管理が驚くほど簡単になります。useStateを使えば簡単に状態を持たせられ、useEffectを使えば必要なときに特定の処理を実行することができます。