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

状態管理を楽にする道

Kalan
December 11, 2020
280

 状態管理を楽にする道

React HAKATAの発表資料です

Kalan

December 11, 2020
Tweet

Transcript

  1. 解決案 1 - useReducer 同じところで複数の状態を変更するとき 通常、useReducer が useState より好ましいのは、複数の値にまたがる複雑な state

    ロジックがある場合や、前の state に基づいて次の state を決める必要があ る場合です。また、useReducer を使えばコールバックの代わりに dispatch を下位 コンポーネントに渡せるようになるため、複数階層にまたがって更新を発生させ るようなコンポーネントではパフォーマンスの最適化にもなります。 https://ja.reactjs.org/docs/hooks-reference.html#usereducer
  2. フラグの問題点 • if (!loading && success && !canceled) みたいなコードが発生しやすい •

    新しいフラグを追加すると、状態が2^n個になる • 開発者はすべての状態を把握することが不可能になる
  3. リソース • xstate: https://xstate.js.org/ • xstate visualizer • Robust User

    interface with finite state machines • XStateで状態遷移を共通言語にしよう • Should I useState or useReducer