Tips and tricks

A collection of good practices and tips to help you get the most out of nuqs

Reusing hooks

If you find yourself reusing the same hooks in multiple components, you can create a custom hook to encapsulate the parser configuration.

Tip

All query states bound to the same key will be synchronized across components.

hooks/useCoordinates.ts
'use client'
 
import { parseAsFloat } from 'nuqs'
 
export function useCoordinates() {
  return useQueryStates({
    lat: parseAsFloat.withDefault(0),
    lng: parseAsFloat.withDefault(0),
  })
}
components/Map.tsx
'use client'
 
import { useCoordinates } from '../hooks/useCoordinates'
 
function MapView() {
  const [{ lat, lng }] = useCoordinates() // Read-only
  return (
    <div>
      Latitude: {lat}
      Longitude: {lng}
    </div>
  )
}
 
function MapControls() {
  const [{ lat, lng }, setCoordinates] = useCoordinates()
  return (
    <div>
      <input
        type="number"
        value={lat}
        onChange={(e) => setCoordinates({ lat: e.target.valueAsNumber })}
      />
      <input
        type="number"
        value={lng}
        onChange={(e) => setCoordinates({ lng: e.target.valueAsNumber })}
      />
    </div>
  )
}

SEO

About

On this page

Reusing hooks