Function App

examples/react/paced-mutations-demo/src/App.tsx:82–448

()

type StrategyType = `debounce` | `queue` | `throttle`

export function App() {
  const [strategyType, setStrategyType] = useState<StrategyType>(`debounce`)
  const [wait, setWait] = useState(300)
  const [leading, setLeading] = useState(false)
  const [trailing, setTrailing] = useState(true)

  const [transactions, setTransactions] = useState<Array<TrackedTransaction>>(
    [],
  )
  const [optimisticState, setOptimisticState] = useState<Item | null>(null)
  const [syncedState, setSyncedState] = useState<Item>(fakeServer.get(1)!)

  // Initialize optimistic state from collection when ready
  useEffect(() => {
    itemCollection.stateWhenReady().then(() => {
      setOptimisticState(itemCollection.get(1))
    })
  }, [])

  // Create the strategy based on current settings
  // Memoize to prevent recreation on every render
  const strategy = useMemo(() => {
    if (strategyType === `debounce`) {
      return debounceStrategy({ wait, leading, trailing })
    } else if (strategyType === `queue`) {
      return queueStrategy({ wait })
    } else {
      return throttleStrategy({ wait, leading, trailing })
    }
  }, [strategyType, wait, leading, trailing])

  // Create the paced mutations hook with onMutate for optimistic updates
  const mutate = usePacedMutations<number>({
    onMutate: (newValue) => {
      // Apply optimistic update immediately
      itemCollection.update(1, (draft) => {
        draft.value = newValue
        draft.timestamp = Date.now()
      })
    },
    mutationFn: async ({ transaction }) => {
      console.log(`mutationFn called with transaction:`, transaction)

      // Update transaction state to executing when commit starts
      const executingAt = Date.now()
      setTransactions((prev) =>
        prev.map((t) => {
          if (t.id === transaction.id) {
            return { ...t, state: `executing` as const, executingAt }
          }
          return t
        }),
      )

      // Simulate network delay to fake server (random 100-600ms)
      const delay = Math.random() * 500 + 100
      await new Promise((resolve) => setTimeout(resolve, delay))