【React.js】useStateの使い方

useStateとは

useState は、コンポーネントに state変数 を追加するための React フックでコンポーネント内で、状態（state）を管理するために使用されます。

useStateの使用方法

state変数は、分割代入を利用して命名します。

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

引数

initialState：stateの初期値で初回レンダー後は無視

返り値

現在のstateで初回レンダー時はinitialStateと同値になります。

set関数

setSomething(nextState)

set関数を利用して、stateを別の値に更新し、サイレンダーをトリガーすることができます。

引数

nextState：次にstateにセットしたい値です。

使用例

import{useState}from'react';

functionMyComponent(){

　const[age,setAge] = useState(42);

　const[name,setName] = useState('Taylor');

// ...

functionhandleClick(){
　setName('Robin');
}

サンプルコード

import { useState } from 'react';

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

　function handleClick() {
　　setCount(count + 1);
　}

　return (
　　You pressed me {count} times
　);

}

落とし穴

set 関数の呼び出しは、既に実行中のコードの現在の state を変更するわけではありません。

functionhandleClick(){
　setName('Robin');
　console.log(name);// Still "Taylor"!
}

この呼び出しは、次のレンダー以降に useState が返す値にのみ影響を与えます。

functionhandleClick(){

　setAge(age + 1);// setAge(42 + 1)

　setAge(age + 1);// setAge(42 + 1)

　setAge(age + 1);// setAge(42 + 1)

}

上記の例は全て43になります。

45ではないのか？と思われるかもしれませんが、既に実行されているコードのstateを更新するわけではないという点に注意が必要です。

この問題を解消する方法

functionhandleClick(){

　setAge(a=>a + 1);// setAge(42 => 43)

　setAge(a=>a + 1);// setAge(43 => 44)

　setAge(a=>a + 1);// setAge(44 => 45)

}

1. a => a + 1 は処理中の state の値として 42 を受け取り、次の state として 43 を返します。
2. a => a + 1 は処理中の state の値として 43 を受け取り、次の state として 44 を返します。
3. a => a + 1 は処理中の state の値として 44 を受け取り、次の state として 45 を返します。