Rork の一覧が増えるほどスクロールで重複と欠落が出る——カーソルページネーションと再取得の状態設計

// サーバーが返すレスポンスの契約
type Page<T> = {
  items: T[];
  nextCursor: string | null; // null なら終端
};
 
// 例: Supabase / 自前 API のどちらでも同じ形に揃える
// GET /posts?cursor=<id>&limit=20  ->  { items, nextCursor }

type Status =
  | "idle"        // 初期状態
  | "loading"     // 初回ロード中
  | "ready"       // 表示中（追加取得が可能）
  | "loadingMore" // 末尾で追加取得中
  | "refreshing"  // 引っ張って再読込中
  | "error"       // 直近の取得に失敗
  | "end";        // 終端に到達

import { useCallback, useReducer, useRef } from "react";
 
type Item = { id: string };
 
type State<T extends Item> = {
  status: Status;
  items: T[];
  cursor: string | null;
};
 
type Action<T extends Item> =
  | { type: "start"; mode: "initial" | "more" | "refresh" }
  | { type: "success"; page: Page<T>; mode: "initial" | "more" | "refresh" }
  | { type: "failure" };
 
function dedupe<T extends Item>(prev: T[], next: T[]): T[] {
  const map = new Map<string, T>();
  for (const it of prev) map.set(it.id, it);
  for (const it of next) map.set(it.id, it); // 同一 id は後勝ちで上書き
  return Array.from(map.values());
}
 
function reducer<T extends Item>(state: State<T>, action: Action<T>): State<T> {
  switch (action.type) {
    case "start":
      return {
        ...state,
        status:
          action.mode === "initial"
            ? "loading"
            : action.mode === "refresh"
            ? "refreshing"
            : "loadingMore",
      };
    case "success": {
      const merged =
        action.mode === "refresh"
          ? action.page.items
          : dedupe(state.items, action.page.items);
      return {
        items: merged,
        cursor: action.page.nextCursor,
        status: action.page.nextCursor === null ? "end" : "ready",
      };
    }
    case "failure":
      return { ...state, status: "error" };
  }
}

export function usePaginatedList<T extends Item>(
  fetchPage: (cursor: string | null) => Promise<Page<T>>
) {
  const [state, dispatch] = useReducer(reducer<T>, {
    status: "idle",
    items: [],
    cursor: null,
  });
 
  // 取得中フラグは描画に依存させず ref で持つ（連続発火を確実に弾く）
  const inFlight = useRef(false);
 
  const run = useCallback(
    async (mode: "initial" | "more" | "refresh") => {
      if (inFlight.current) return;
      // 終端に達していて追加取得なら何もしない
      if (mode === "more" && state.status === "end") return;
 
      inFlight.current = true;
      dispatch({ type: "start", mode });
      const cursor = mode === "refresh" ? null : state.cursor;
      try {
        const page = await fetchPage(cursor);
        dispatch({ type: "success", page, mode });
      } catch {
        dispatch({ type: "failure" });
      } finally {
        inFlight.current = false;
      }
    },
    [fetchPage, state.cursor, state.status]
  );
 
  return {
    ...state,
    loadInitial: () => run("initial"),
    loadMore: () => run("more"),
    refresh: () => run("refresh"),
  };
}

async function withBackoff<T>(
  fn: () => Promise<T>,
  retries = 3,
  base = 500
): Promise<T> {
  let lastError: unknown;
  for (let attempt = 0; attempt <= retries; attempt++) {
    try {
      return await fn();
    } catch (e) {
      lastError = e;
      if (attempt === retries) break;
      const wait = base * 2 ** attempt + Math.random() * 200; // ジッタを加える
      await new Promise((r) => setTimeout(r, wait));
    }
  }
  throw lastError;
}

function Footer({ status, onRetry }: { status: Status; onRetry: () => void }) {
  if (status === "loadingMore") return <ActivityIndicator style={{ padding: 16 }} />;
  if (status === "error")
    return (
      <Pressable onPress={onRetry} style={{ padding: 16, alignItems: "center" }}>
        <Text>読み込みに失敗しました。タップして再試行</Text>
      </Pressable>
    );
  if (status === "end")
    return <Text style={{ padding: 16, textAlign: "center", opacity: 0.5 }}>すべて表示しました</Text>;
  return null;
}
 
// 一覧側
<FlatList
  data={items}
  keyExtractor={(it) => it.id}
  renderItem={renderItem}
  onEndReached={loadMore}
  onEndReachedThreshold={0.5}     // 末尾まで残り半画面で先読み
  refreshing={status === "refreshing"}
  onRefresh={refresh}
  ListFooterComponent={<Footer status={status} onRetry={loadMore} />}
  // 描画コストを抑える定番の設定
  initialNumToRender={10}
  windowSize={7}
  removeClippedSubviews
/>