カンバン風の複数パネルUI(Done / Current / Backlog / Icebox等)で、全データを一括取得→クライアント側で振り分けていた構成を、パネルごとに独立してAPIを叩く方式にリファクタした。
もともとの構成だと、全件取得してからクライアントでフィルタリングしていたため、データ量が増えると初期表示が遅くなり、特定パネルだけページネーションしたいケースに対応できなかった。
リファクタ後の構成:
panelStories: Record<PanelType, Item[]>
panelLoading: Record<PanelType, boolean>
panelErrors: Record<PanelType, string | null>
panelPagination: Record<PanelType, { page: number; hasNext: boolean }>
Record<PanelType, T> で管理。あるパネルのロード中でも他パネルは操作可能buildSharedQuery() で組み立てて各パネルのリクエストに載せるトレードオフとして、APIリクエスト数は増える(1回→パネル数分)。ただしパネルごとに並列リクエストできるので体感速度はむしろ改善する。パネル間でアイテムを移動した際のローカルステート同期は mergePanelStories() で全パネルの配列をフラットに結合して保持する形にした。