Zenn
🐕

【React】useStateフックの基本

2021/09/30に公開
React
hook
tech

stateとは

一言でいうと、stateとは値が変わると再レンダリングが起こる変数です。
細かいことは抜きにするとstateの値が変わると再レンダリングが起こり画面の表示が変わります。

さっそく、実際の挙動について説明していきます。
今回は公式ドキュメントのサンプルコードを元に説明していきます。
https://ja.reactjs.org/docs/hooks-state.html

サンプルコード

下記がサンプルコードになります。
ボタンを押すとカウンターの値が増加される機能のコードです。
流れとしては下記になります。
1．stateを使えるようにする
2．stateを定義
3．stateの値を変えてみる

import React, { useState } from 'react';

function Example() {
  // state "count"の定義
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

1．stateを使えるようにする

まずはstateを使えるようにします。stateを使うためにはReactのuseStateフックというものが必要になります。それを読み込みましょう。

import React, { useState } from 'react';

上記のコードでuseStateフックを React からインポートします。

2．stateを定義

次に、1. でインポートしたuseStateフックを使ってstateを定義します。

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

useStateフックを使って新しいstateを定義します。useStateフックの引数に新しく定義するstateの初期値を渡します。そして、useStateフックは2 つの値のペアが返すので、それらに任意で好きな名前を与えます。1つ目がstateの値、2つ目がstateの値を変えるための関数になります。
上記のコードの場合は初期値が0のcountというstateとそのstateの値を変えるための関数setCountになります。慣習的にuseStateの返りの関数にはset（state名）と命名する場合が多いです。

3．stateの値を変えてみる

次に、2. で定義したsetCountを使ってcountの値を変えてみましょう。

<button onClick={() => setCount(count + 1)}>
  Click me
</button>

setCountの引数に値を渡すことでペアのstateのcountの値が変わります。
上記のコードではボタンをクリックすると、setCountにcount + 1の値が渡されるのでcountの値が+1されます。そして、記事の冒頭で言った通りstateは値が変わると再レンダリングが起こるので再レンダリングが起こり画面が更新されてcountの値が+1された画面になります。

以上です。読んでいただきありがとうございました。
誤字、脱字、間違い等ありましたらコメント頂ければ幸いです。

Discussion