Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: useSearchParams not giving correct value with useBlocker (reopen) #12256

Open
Fattimo opened this issue Nov 9, 2024 · 2 comments
Open
Labels

Comments

@Fattimo
Copy link

Fattimo commented Nov 9, 2024

What version of React Router are you using?

6.27.0

I was able to repro the bug. This is a stackblitz with an environment that allows you to repro. I used 6.27.0

https://stackblitz.com/edit/github-ypgwe9?file=src%2Fapp.tsx,src%2Fmain.tsx

I've attached two videos explaining the bug as well:

  1. (control) Expected behavior:
Screen.Recording.2024-11-08.at.4.31.41.PM.mov
  1. Search params returning a value that should be blocked, IF using the (prev) value in the setSearchParams function
Screen.Recording.2024-11-08.at.4.32.21.PM.mov
@Fattimo
Copy link
Author

Fattimo commented Nov 9, 2024

Original issue with repro steps: #12188 (comment)

@Fattimo
Copy link
Author

Fattimo commented Nov 9, 2024

Workaround: avoid prev at all costs. For the maintainers, very likely, mutating prev in any way triggers a change to the underlying data in a code path independent of relying on the path.

Leaving prev untouched and cloning it into an object will trigger the happy path and allow it to work.

// old code
routerSetSearchParams(
        (prev) => {
          // modify prev, e.g. prev.key = value


          return prev;
        },
      );
// workaround
routerSetSearchParams(
        (prev) => {
          const next = Object.fromEntries(prev.entries());
          // modify next in the same way you would modify prev
          return next;
        },
      );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant