🌟

設計手順、考え方

2024/06/25に公開

使う側を書いていく

  • 要件定義の洗い出し
  • グルーピングしたくなる要因がでる
    • 同じ処理(数行程度以上の塊)の発見
    • ファットになってきて、関数内の処理が見分けがつかない(=依存関係がわからない)

グルーピングしたくなる要因がでてきたあたりで、
グルーピング(ライブラリ側)を書いていく。

ライブラリ側は汎用的に書かないといけないので、

  • 主語になるエンティティは慎重に選ぶ必要がある(特に単数形と複数形)
  • 使う側の要件の変更をする場合がある

データフェッチ機能: fetch問題をライブラリで解決

  • 子孫データをfetchするタイミング

    • 都度パターン: 子孫componentを開く度にfetchする。初期読み込みコストが低い。
    • 初期パターン: 初期読み込みコストが高い。
  • N+1問題: 条件をつける, サブコレクションに対する一括クエリで解決か?

  • インスタンスでsetStateを持っていくと便利(編集とか)=> set時は通信してthenでルートモデルを書き換えればいいのでは?それを必要な(たぶんルート)コンポーネントでsetState。

  • インスタンスにsetStateいれると配列のときにuseStateがn個必要

  • ルートモデル: どこからでもアクセスできる。各コンポーネントでロード。set時は通信してthenでルートモデルを書き換えればいいのでは?それを必要な(たぶんルート)コンポーネントでsetState。

    • App.mine
    • Page.users
    • Page.user
  • useStateとは: stateをもとにsetStateで再描画させるためのシステム。それだけ。

    • stateはいじれない。再描画を実行するsetStateの引数に更新値をいれる。
    • そのコンポーネント名では?: App, setApp

React

SWR

  • URLは変わらないけどトークンなどで結果が変わる場合の対処

https://qiita.com/hakshu/items/3f2810bfff751b38c612#key-について


React Model: 状態管理ライブラリで解決

  • グローバルに(user, mine, usersなどの)ルートモデルを置きたい
  • それを各コンポーネントが自由に更新、読み込みしたい。
  • setXxxxがない。あってもルートのsetXxxxを更新するのは高負荷な気がする。
  • Thumbnail.tsなどクラスファイルをmodel/配下におきたい。

参考

  • 階層型オブジェクトを狙っててよい!

https://befool.co.jp/blog/8823-scholar/use-model-on-react/

Jotai

importの順番

  • 依存関係順, そのあとa~Z順。
  • 依存度が少ないほうが上。

Tips

  if (room === undefined)
    return;
  const { trigger, isMutating } = useSWRMutation(room ? `/rooms/${room.id}/contents?orderBy=[["created_at"]]` : null, (path, { arg }) => arg());
  • useSWRMutationの前にif文おいてもダイジョーブ♡
  • ~useSWRの前にif文おいてもダイジョーブ♡~ ウソ♡
  if (SWRcontents.isLoading || SWRcontents.data.length === 0)
    return;

  const SWRuser = useSWR(mine ? `/users/${room.getAnotherUserId()}` : null);

Discussion