【TypeScript+React ④】React Hooksにおける　useStateについて

useStateについて

React hooksにおいて提供されている関数の1つになり、値の状態の保持・更新などを行う際に使用されている関数になります。

useState()は、関数コンポーネントでstateを管理（stateの保持と更新）するためのReactフックであり、最も利用されるフックです。状態管理と聞くとイメージが湧きにくいですが要はコンポーネントの中で変数を扱うことができる機能です。例えば input 要素に入力した文字をコンポーネント内で保持したい場合に useState を利用することができます。

stateとはコンポーネントが内部で保持する「状態」のことで、画面上に表示されるデータ等、アプリケーションが保持している状態を指しています。stateはpropsと違い後から変更することができます。

useState を利用するためには、useState を import する必要があります。

import React, { useState } from 'react';

コンポーネント内で状態管理を行いたい変数を useState を使って宣言します。

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

※count が変数で、 setCount メソッドを使って count の値を変更することができます。
useState の()で設定している 0 が count 変数の初期値です。

import React, {useState} from 'react'

interface Props{
    text:string;    //関数Propsの属性[text]をstring型で定義
}
const TestComponent:React.FC<Props> = (props) => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <h1>{props.text}</h1>
            <h1>{count}</h1>
        </div>
    )
};
export default TestComponent ;

null

const [count, setCount] = useState<number|null>(null);

オブジェクト

interface UserData{
　　　　id:number;
　　　　name:string;
}

const [user, setUser] = useState<UserData>({id:1,name:"dummy"});