React Hooksの備忘録 ～useState()～
ReactのReact Hooks
フロントエンド開発で学習したものを忘れないようにReact Hooksの備忘録として投稿。
- useState()
- useEffect()
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は初期値になります。
初回レンダー時にstateにinitialStateが代入されます。
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ボタンで加算された値がゼロに戻ります。
ここで使用される三点リーダーに関しましてはここのリンクを参照ください。
まとめ
useStateの要件をまとめると以下のようになります。
- 第一引数に変数を定義（オブジェクトも可）
- 第二引数に変数を更新する関数を定義
-
useState()の引数で初期値を設定可能
参考文献
気になったこと
useStateを定義する際、
const [state, setState] = useState(initilaState)
となり、[◇◇, set◇◇]の形で書かれますが、
const [state, noSetState] = useState(initilaState)
と書いてもnoSetState関数は問題なく動作しますが、set◇◇の方が良いと思われます。
Discussion