Batching

State updates are collected and batched into one update on the next tick.
'use client'

import { Button } from '@/src/components/ui/button'
import { parseAsFloat, useQueryState } from 'nuqs'

const parser = parseAsFloat.withDefault(0)

export default function BuilderPatternDemoPage() {
  const [lat, setLat] = useQueryState('lat', parser)
  const [lng, setLng] = useQueryState('lng', parser)
  return (
    <>
      <Button
        onClick={async () => {
          // Call as many state updates as needed in the same event loop tick,
          // and they will be asynchronously batched into one update.
          const p1 = setLat(Math.random() * 180 - 90)
          const p2 = setLng(Math.random() * 360 - 180)
          // The returned promise is cached until next flush to the URL occurs
          console.log('Promise cached: ', p1 === p2)
          p1.then(search => console.log('Awaited: %s', search.toString()))
        }}
      >
        Random coordinates
      </Button>
      <ul>
        <li>Latitude: {lat}</li>
        <li>Longitude: {lng}</li>
      </ul>
    </>
  )
}
Batching

On this page
