Reset the param on route change

[batuhanbuena]

Hey,
whats the best way to reset the param on route change. If i have sth like

const goTo = () => {
    //setUrl({ currentEvent: undefined });
    startTransition(() => {
      setUrl({ currentEvent: undefined });
      router.push(getDetailsUrl());
      dispatch({ type: 'clear' });
    });
  };`

it reset my url back to the home page. Is there a way to reset the url before you change route. I dont want to do it on every page

[asmyshlyaev177]

Hi @batuhanbuena .

Normally can reset all params like setUrl(form) where form is the defaultState.

Just curious, why need to reset state before page change?

About page change, can try to use useEffect , e.g return unsubscribe function from it, like

const { urlState, setUrl, reset } = useUrlState(eventState);

React.useEffect(() => {
  ...
  return () => {
    reset()
    // same as setUrl(eventState);
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

Can wrap hook into another hook if there is some specific logic, something like

const useEventState = (reset = false) => {
 const result = useUrlState(eventState)

  React.useEffect(() => {
    return () => {
      if (reset) result.reset()
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [reset])

  return result
}

Can dig deeper into it on weekend.

[asmyshlyaev177]

Created a reset callback in a new version.

Can use it like

const { urlState, setUrl, reset } = useUrlState(eventState)

<button onClick={reset}>Reset</button>

@batuhanbuena Let me know if the suggested solution works.

[batuhanbuena]

Yes thats perfect thank you. The current implementation uses the .push method right? Like it adds a entry in the history api. Is there a way to do it without adding to the history api ? Line the replace method. Thank you very much for the quick response i rly like what you are doing with this package.

[asmyshlyaev177]

Thank you, I'm glad to hear it useful.

For Next.js it's use replace by default.
Can set default when calling hook like const { urlState } = useUrlState(state, { replace: false }) or useUrlState(state, { replace: true })

After that, can pass replace option to setUrl and reset callbacks, like setUrl(newState, { replace: false }), and reset({ replace: true })

I'm thinking maybe need to implement behavior when first url change is a push and all consequent are replace.

[batuhanbuena]

Oh thank you and how would i do it if i just want to set one of the params as replace and the others as push ? Is there sth line seturl(value, {replace:true) ?Am 15.11.2024 um 21:17 schrieb Aleksandr Smyshliaev ***@***.***>: For Next.js it's use replace by default. Can set default when calling hook like const { urlState } = useUrlState(state, { replace: false }) or useUrlState(state, { replace: true }) After that, can pass replace option to setUrl and reset callbacks, like setUrl(newState, { replace: false }), and reset({ replace: true }) —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[asmyshlyaev177]

For now, thinking something like this (for first one push, and next ones replace)

const { urlState, setUrl: setUrlOrig } = useUrlState(state, { replace: true })

const replace = React.useRef(false);

const setUrl = React.useCallback((state, opts) => {
  setUrlOrig(state, { replace: replace.current, ...opts} )
  replace.current = true;
}, [])

Didn't figure out perfect solution yet. Like put it in some recipes or create an argument for this.