【React】useStateについて

こんにちわ、masumasuです。

蝉の鳴き声に夏の到来を感じさせられるこのごろですが、皆様いかがお過ごしでしょうか。

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

useState

useStateはコンポーネント内での状態を扱うための関数の1つです。

useStateは、初期状態を引数に取り、現在の状態とその状態を更新するための関数を返します。基本的な構文は以下の通りです。

const [state, setState] = useState(initialState);

stateは現在の状態の値を表し、setStateはその状態を更新するための関数です。

例えば、カウントアップするカウンターコンポーネントを作成する場合、以下のようにuseStateを使用します：

import React, { useState } from 'react';

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

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

export default Counter;

複数の状態を管理する

useStateは、同じコンポーネント内で複数回呼び出すことができ、それぞれが独立した状態になります。

例えば、複数の入力フィールドを持つフォームを管理する場合、以下のように書きます：

import React, { useState } from 'react';

function Form() {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');

    return (
        <form>
            <div>
                <label>
                    Name:
                    <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
                </label>
            </div>
            <div>
                <label>
                    Email:
                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
                </label>
            </div>
        </form>
    );
}

export default Form;

オブジェクトや配列の状態管理

オブジェクトや配列の状態を管理する場合もuseStateを利用できます。

ただし、状態を更新する際に、スプレッド構文などを用いて元の状態を維持しつつ変更を加えましょう。

例えば、複数のフィールドを持つフォームデータをオブジェクトで管理する場合、以下のように書きます。

import React, { useState } from 'react';

function UserForm() {
    const [user, setUser] = useState({ name: '', email: '' });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setUser((prevUser) => ({
            ...prevUser,
            [name]: value
        }));
    };

    return (
        <form>
            <div>
                <label>
                    Name:
                    <input type="text" name="name" value={user.name} onChange={handleChange} />
                </label>
            </div>
            <div>
                <label>
                    Email:
                    <input type="email" name="email" value={user.email} onChange={handleChange} />
                </label>
            </div>
        </form>
    );
}

export default UserForm;

まとめ

useStateは、Reactの関数コンポーネント内で状態を管理するための基本的な関数です。

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