Function useSyncStateAndSearchParam

Util hook to keep a state variable in sync with a URL search parameter. This hook syncs from URL to state if the state is null/undefined (so initial value is set from URL) and from state to URL otherwise.

This hook properly queues setSearchParams calls to ensure all updates are applied, working around react-router's limitation where multiple calls to setSearchParams in the same tick don't build on each other. See: https://github.com/remix-run/react-router/issues/9304

  • useSyncStateAndSearchParam(
        stateVar: undefined | null | string | number | boolean,
        updateStateVar: (val: null | string) => void,
        searchParamKey: string,
        searchParamValue: null | string,
        setSearchParams: SetURLSearchParams,
        initializedCallback: () => boolean,
        clearParamOnUnmount?: boolean,
    ): void

    Parameters

    • stateVar: undefined | null | string | number | boolean

      the state variable to sync

    • updateStateVar: (val: null | string) => void

      setter function to update the state variable (should be memoized with useCallback)

    • searchParamKey: string

      the key of the URL search parameter to sync with

    • searchParamValue: null | string

      the current URL search parameter value (i.e., from useSearchParams)

    • setSearchParams: SetURLSearchParams

      function to update the URL search parameters (i.e., from useSearchParams)

    • initializedCallback: () => boolean

      function to check if the underlying state is initialized and ready to sync with URL (should be memoized with useCallback)

    • clearParamOnUnmount: boolean = true

    Returns void

Settings

Member Visibility