📌

React Hooksの備忘録 ~useState()~

2022/06/05に公開約2,400字

ReactのReact Hooks

フロントエンド開発で学習したものを忘れないようにReact Hooksの備忘録として投稿。

https://zenn.dev/coco9122/articles/react-hook-useeffect-coco9122

useState()の基本的な使い方

Reactの公式のHookのAPI Refereneceより

ステートフルな値と、それを更新するための関数を返します。
Returns a stateful value, and a function to update it.

とのこと。データの保持と更新することのできるHook。

importは以下の文になります。

import { useState } from 'react' 

以下のように記述します。

const [state, setState] = useState(initilaState)

ここでいうstateは変数名、initialStateは初期値になります。

初回レンダー時にstateinitialStateが代入されます。

setStateは関数であり、stateを更新するために使用されます。それとともにコンポーネントを再レンダーを行います。

実際に行ってみます。

今回はシンプルにinitialStateにはtrue代入し、TRUEボタンを押したらTRUEにFALSEボタンを押したらFALSEとなります。実際にボタンを押すことで、stateに値が代入され、<p>が再レンダーされています。

これだと再レンダーされない

上記の書き方だと再レンダーされますが、変数を更新する関数を使わず、変数を直接更新すると、再レンダーされません。Reactの公式のHookのAPI Refereneceより

現在値と同じ値で更新を行った場合、React は子のレンダーや副作用の実行を回避して処理を終了します。
If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects.

したがって、変数を更新する関数によって、更新する必要があります。

useState()はオブジェクトも使用可

initialStateの初期値にオブジェクトを代入することもできます。

const [state, setState] = useState({
    fizz: 0,
    buzz: 0,
})

実際に行ってみます。

Add Fizzボタンを押すとFizzが加算され、Add Buzzボタンを押すとBuzzが加算されます。RESETボタンで加算された値がゼロに戻ります。

ここで使用される三点リーダーに関しましてはここのリンクを参照ください。

https://pgmemo.tokyo/data/archives/2067.html

まとめ

useStateの要件をまとめると以下のようになります。

  • 第一引数に変数を定義(オブジェクトも可)
  • 第二引数に変数を更新する関数を定義
  • useState()の引数で初期値を設定可能

参考文献

  • React Hooks入門 著者「soarflat」Link
  • React公式サイト Link

気になったこと

useStateを定義する際、

const [state, setState] = useState(initilaState)

となり、[◇◇, set◇◇]の形で書かれますが、

const [state, noSetState] = useState(initilaState)

と書いてもnoSetState関数は問題なく動作しますが、set◇◇の方が良いと思われます。

GitHubで編集を提案

Discussion

ログインするとコメントできます