【React Native】FlashListとuseDeferredValueで固定ヘッダー付きリストを実装する

import { FlashList } from "@shopify/flash-list"
import { Text } from "react-native"
 
const products = [
  { id: 1, name: "商品A" },
  { id: 2, name: "商品B" },
  { id: 3, name: "商品C" },
]
 
function ProductList() {
  return (
    <FlashList
      data={products}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      keyExtractor={(item) => item.id.toString()}
    />
  )
}

type ListItem = { type: "carousel" } | { type: "tabHeader" } | { type: "product"; product: Product }

const listData: ListItem[] = [
  { type: "carousel" },
  { type: "tabHeader" },
  ...products.map((product) => ({ type: "product" as const, product })),
]

const renderItem = ({ item }: ListRenderItemInfo<ListItem>) => {
  switch (item.type) {
    case "carousel":
      return <Carousel />
    case "tabHeader":
      return <Tabs tabs={tabs} selectedTab={selectedTab} onChangeTab={setSelectedTab} />
    case "product":
      return <ProductCard product={item.product} />
    default:
      throw new Error(`Unexpected list item type: ${(item as ListItem).type}`)
  }
}

<FlashList
  data={listData}
  stickyHeaderIndices={[1]}
  getItemType={(item) => item.type}
  keyExtractor={(item) => (item.type === "product" ? item.product.id.toString() : item.type)}
  renderItem={renderItem}
/>

{/* 商品データの準備が整うまでは<LoadingIndicator />が表示される */}
<Suspense fallback={<LoadingIndicator />}>
  {/* ProductList内でuseSuspenseQueryを使用して商品データを取得 */}
  <ProductList />
</Suspense>

const useProductsQuery = (tabId: string) => {
  const { data } = useSuspenseQuery({
    queryKey: ["products", tabId],
    queryFn: () => fetchProducts(tabId),
  })
  return { products: data }
}

const [selectedTab, setSelectedTab] = useState(tabs[0].id)
// selectedTabが変わるたびにサスペンドし、Suspenseのフォールバックが表示されてしまう
const { products } = useProductsQuery(selectedTab)

const [selectedTab, setSelectedTab] = useState(tabs[0].id)
const deferredTab = useDeferredValue(selectedTab) 
const { products } = useProductsQuery(selectedTab) 
const { products } = useProductsQuery(deferredTab) 

import { FlashList, type ListRenderItemInfo } from "@shopify/flash-list"
import { useDeferredValue, useState } from "react"
import { Carousel } from "@/components/Carousel"
import { ProductCard } from "@/components/ProductCard"
import { Tabs } from "@/components/Tabs"
import { useProductsQuery } from "@/hooks/useProductsQuery"
import type { Product, Tab } from "@/types/product"
 
type ListItem = { type: "carousel" } | { type: "tabHeader" } | { type: "product"; product: Product }
 
type Props = {
  tabs: Tab[]
}
 
export function ProductList({ tabs }: Props) {
  const [selectedTab, setSelectedTab] = useState(tabs[0].id)
  const deferredTab = useDeferredValue(selectedTab)
  const { products } = useProductsQuery(deferredTab)
 
  const listData: ListItem[] = [
    { type: "carousel" },
    { type: "tabHeader" },
    ...products.map((product) => ({ type: "product" as const, product })),
  ]
 
  const renderItem = ({ item }: ListRenderItemInfo<ListItem>) => {
    switch (item.type) {
      case "carousel":
        return <Carousel />
      case "tabHeader":
        return <Tabs tabs={tabs} selectedTab={selectedTab} onChangeTab={setSelectedTab} />
      case "product":
        return <ProductCard product={item.product} />
      default:
        throw new Error(`Unexpected list item type: ${(item as ListItem).type}`)
    }
  }
 
  return (
    <FlashList
      data={listData}
      stickyHeaderIndices={[1]}
      getItemType={(item) => item.type}
      keyExtractor={(item) => (item.type === "product" ? item.product.id.toString() : item.type)}
      renderItem={renderItem}
    />
  )
}

<Suspense fallback={<FullScreenLoader />}>
  <ProductList tabs={tabs} />
</Suspense>