Using useBlocker to save data before navigating away

[eden-lane]

I'm trying to use useBlocker a little bit out of the purpose of it: I don't want to prevent navigation, I want to save data and THEN allow user to navigate away.
So, my code is:

const useBeforeNavigate = (callback: () => void) => {
  const blocker = useBlocker(
    ({ currentLocation, nextLocation }) =>
      currentLocation.pathname !== nextLocation.pathname,
  );

  useEffect(() => {
    if (blocker.state === 'blocked') {
      callback?.();
      blocker.proceed?.();
    }
  }, [blocker, callback]);
};

It doesn't work for some reason. It allows to go to another page (and saves the data as intended), but after that it blocks the navigaton completely. Is there any way to remove the blocking in useEffect's clean up function?

I've tried to do the following:

return () => {
  if (blocker.state === 'blocked') {
    blocker.proceed();
  }
}

but I get the error: "Can't proceed the blocker which is not in blocked state"

[rjgotten]

Is there any way to remove the blocking in useEffect's clean up function?

blocker.reset()

[eden-lane]

I've tried this too, it doesn't work. Docs say it resets the state and user stays on the same page

[dvcorreia]

I'm facing exactly the same thing

[eden-lane]

I'm not a fan of my solution, but it works for me:

const useBeforeNavigate = (callback: () => void) => {
  const location = useLocation();

  const blocker = useBlocker(
    ({ currentLocation, nextLocation }) =>
      currentLocation.pathname !== nextLocation.pathname &&
      currentLocation.pathname === location.pathname,
  );

  useEffect(() => {
    if (blocker.state === 'blocked') {
      callback?.();
      blocker.proceed?.();
    }
  }, [blocker]);
};

We need to check if we're on the same location the hook was supposed to block, otherwise it blocks all other navigations.
As I said, it looks like a workaround, but I haven't found any other way to solve this.

[rjgotten]

We need to check if we're on the same location the hook was supposed to block, otherwise it blocks all other navigations.

That's just weird.
How can you change location to any other location the hook wasn't supposed to block navigation from, if the hook was already blocking navigation ?