トグル
よくあるトグル。
const [flag, setFlag] = useState(true)
<button onClick={() => setFlag(prev => !prev)}>Toggle</button>
何度も書く場合 useReducerを利用すると setFlag(prev => !prev) の記述をもっと短縮できる。
const [flag, toggleFlag] = useReducer(prev => !prev, true)
<button onClick={toggleFlag}>Toggle</button>
セッター関数dehanainode,toggleFlag というわかりやすい命名にもできた。
useReducerはイベントをディスパッチする用途以外にもこういう利用方法もある。
遅延イニシャライズ
useStateに初期値を渡すと、初期変数は常に作成されるが、Reactはそれを初回のレンダリングにしか利用しない。
初期変数に複雑な計算をしなければならない場合、これがヘビーな処理だとコストがかかる。
NGパターン
const [value, setValue] = useState(
calc(props)
)
これだとレンダーごとにcalc関数が実行されてしまう。
こうする。
const [value, setValue] = useState(
() => calc(props)
)
こうすると、関数が呼び出されるのは初回のみになる。
Discussion