NOTE 100 / 2022年
小さな状態を、どこに置くか
useState の値が更新され、画面に反映される流れを追います。
読了目安 約2分
useState は、コンポーネントに小さな状態を持たせるための仕組みです。更新関数を呼ぶと、そのコンポーネントの再描画が予約されます。同じイベントの中で複数回呼んだ場合、関数形式の更新を使うと前の値を安全に引き継げます。
状態は描画のたびに作り直されるわけではありません。フックの順序を保つこと、初期値を必要以上に重くしないことが、安定した動きにつながります。
押さえたい点
- 01更新は再描画の予約として考える
- 02連続更新は関数形式を使う
- 03フックの呼び出し順を変えない
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- React 学習ガイド 外部サイトreact.dev
- React リファレンス 外部サイトreact.dev
- React で考える 外部サイトreact.dev
- useState リファレンス 外部サイトreact.dev
- useEffect リファレンス 外部サイトreact.dev
- useContext リファレンス 外部サイトreact.dev
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- TypeScript の設定 外部サイトtypescriptlang.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- web.dev 外部サイトweb.dev
- W3C WAI 外部サイトw3.org
- GitHub Docs 外部サイトdocs.github.com
- Chrome for Developers 外部サイトdeveloper.chrome.com