Upgrade to Pro — share decks privately, control downloads, hide ads and more …

状態ってなに?🙃

taro
December 19, 2022

 状態ってなに?🙃

2022.12.19にマナリンクさんにお邪魔させていただいて話したゆるいLTの資料です。

taro

December 19, 2022
Tweet

More Decks by taro

Other Decks in Programming

Transcript

  1. 状態の性質 ▼Webアプリケーションの状態の例▼ • テーブルに一覧表示されているデータ • モーダルの開閉状態 • フォームに入力中のデータ • だれがログインしているか

    • どのページを開いているか →保持されていて、変化する/変更できるもの →状態には保持される期間(ライフタイム)がある
  2. 状態のライフタイムと管理方法 ▼状態のライフタイム→管理方法の例▼ • モーダルが閉じるまで→useState, DOMのvalue, etc. • ブラウザをリロードするまで→useContext, redux, etc.

    • ブラウザのタブを閉じるまで→Session Storage, etc. • ブラウザのストレージを削除するまで→Session Storage, Local Storage • サーバーのDBのレコードを削除するまで→サーバーのDB
  3. 状態のライフタイムと管理方法 ▼状態のライフタイム→管理方法の例▼ • モーダルが閉じるまで→useState, DOMのvalue, etc. • ブラウザをリロードするまで→useContext, redux, etc.

    • ブラウザのタブを閉じるまで→Session Storage, etc. • ブラウザのストレージを削除するまで→Session Storage, Local Storage • サーバーのDBのレコードを削除するまで→サーバーのDB →状態のライフタイムを実現できる適切な管理方法を選ぶ! ※もちろんライフタイムが全てではなく他要件(スコープなど)にも依る
  4. 状態のライフタイムと管理方法 改めて状態のライフタイムはとても大切 • モーダルの開閉状態だからといってuseState一択ではない ◦ notionはクエリパラメータで保持している ◦ 状態管理は複雑になるがモーダルを開いた状態で共有できる • Google

    Formは入力中の値もサーバーのDBに定期保存している • ライフタイムが長い管理方法を使う時はクリーンアップを意識する →状態はユーザーのもの、安易に破棄せず大切に扱いたい
  5. 宣言的UI 鈴木 僚太(うひょ) (2022) 『WEB+DB PRESS Vol.129 』技術評論社 特集1 Reactの深層

    図3から引用(https://gihyo.jp/magazine/wdpress/archive/2022/vol129)
  6. Reactにおける状態 stateかどうかの判断軸 Which of these are state? Identify the ones

    that are not: • Does it remain unchanged over time? If so, it isn’t state. • Is it passed in from a parent via props? If so, it isn’t state. • Can you compute it based on existing state or props in your component? If so, it definitely isn’t state! https://beta.reactjs.org/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state
  7. Reactにおける状態 stateかどうかの判断軸 Which of these are state? Identify the ones

    that are not: • Does it remain unchanged over time? If so, it isn’t state. • Is it passed in from a parent via props? If so, it isn’t state. • Can you compute it based on existing state or props in your component? If so, it definitely isn’t state! →最小限のstateを見つけるのが大切 https://beta.reactjs.org/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state
  8. Reactにおける状態 stateかどうかの判断軸 Which of these are state? Identify the ones

    that are not: • Does it remain unchanged over time? If so, it isn’t state. • Is it passed in from a parent via props? If so, it isn’t state. • Can you compute it based on existing state or props in your component? If so, it definitely isn’t state! →最小限のstateを見つけるのが大切 →state同士を同期させるのではなく、Lifting state upで1つのstateにする https://beta.reactjs.org/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state