Closed8

レンダリングの改善

かげやまかげやま

こんな感じ

1行ずつ、すべての列が順番にレンダリングされている

モッサリ感がすごい

かげやまかげやま

なんでこうなっているかというと、
カテゴリ（親）を一つ選択すると、それを親とする商品（子）のデータを都度フェッチしている。

RDBは、NeonDB at シンガポールなのでそれなりに時間がかかる

かげやまかげやま

この案件の性質上、カテゴリ、商品が都度CRUDされるわけでもない。

画面が表示されたときに、ごそっと取ってきておいて、
Stateから取得するのが手っ取り早そう

通信はせずに、グローバルステートから取ってくるようにする

かげやまかげやま

今回使用するのはzustand

type CategoryWithProdusts = {
    id: string;
    name: string;
    products: {
        id: string;
        name: string;
    };
}

を画面描画時に保持させておく。

zustandはでかいものから部分的なものを切り出すことが可能なので
categoryId を指定して、それを親とするproducts を返すようにすれば
毎度通信をする必要がないと期待した。

かげやまかげやま

一目瞭然で、都度の通信はなくなり
レンダリングもだいぶ無駄がなくなった

かげやまかげやま

行を更新するとごに、全部読み直しになっているのを改善したい

方針として、行ごとを状態管理し、更新したところを差し替える
裏側では更新処理を走らせる

かげやまかげやま

致命的なミスをしていた

行レベルを区別することなく、同じ状態に書き込みに行っていたので
どの行も同じ値にしていた。。。

このスクラップは2024/11/20にクローズされました