Like useState hook, but saves current state in browser search bar (Next.js router query)

useRouterQueryState.js

// import useRouterQueryState from '../hooks/useRouterQueryState'
// const [myState, setMyState] = useRouterQueryState(propertyName, defaultValue)

import { useState, useEffect } from 'react'
import { useRouter } from 'next/router'

function useRouterQueryState (key, defaultValue) {
  const router = useRouter()

  // Get initial state from router query or default value
  const [state, setState] = useState(router.query[key] ?? defaultValue)

  useEffect(() => {
    // Update state when router query changes
    setState(router.query[key] || '')

    // Also, set up an event listener for route changes
    const handleRouteChange = (url) => {
      setState(router.query[key] || '')
    }

    router.events.on('routeChangeComplete', handleRouteChange)

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.query])

  const setQueryState = (value) => {
    setState(value)
    // Update the URL without navigating
    const queryWithoutKey = { ...router.query }
    delete queryWithoutKey[key]
    router.push({
      pathname: router.pathname,
      query: {
        ...queryWithoutKey,
        ...(value && { [key]: value })
      }
    }, undefined, { shallow: true })
  }

  return [state, setQueryState]
}

export default useRouterQueryState