Function useQueryState

pkg/webui/lib/hooks/use-query-state.js:29–43

(key, initialValue, parser = v => v)

 * @returns {[T, (newValue: T) => void]} - A tuple with the stateful value and a setter function.
 */
const useQueryState = (key, initialValue, parser = v => v) => {
  const [searchParams, setSearchParams] = useSearchParams()
  const [state, setState] = useState(parser(searchParams.get(key)) || initialValue)

  useEffect(() => {
    if (state === undefined || state === '') {
      searchParams.delete(key)
    } else {
      searchParams.set(key, state)
    }
    setSearchParams(searchParams, { replace: true })
  }, [key, state, searchParams, setSearchParams])

  return [state, setState]
}

export default useQueryState