Giters

pbeshai / use-query-params

React Hook for managing state in URL query parameters with easy serialization.

Home Page:https://pbeshai.github.io/use-query-params

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

two `setParam()` calls made together overwrite each other

hallucinogenizer opened this issue · comments

commented

Description

I have reproduced the issue in a codesandbox. Here it is.
The sandbox uses NextJS App Router.

I'm not sure if this issue belongs here or in the next-query-params repository.

What the issue is and how to reproduce it in the sandbox

  • In the sandbox, I have two buttons, each incrementing the value of one query param in the URL. We have 2 query params therefore.
  • When you click Button 1, it does 2 things:
    1. It increments the value of param1 in the URL
    2. It increments the value of param1 in localStorage
  • Now click on Button 2 and increment the value of param2 in both URL as well as localStorage. Make sure it has a different value than param1.
  • Now erase the params from the URL and re-visit the page (without any URL params).
  • Since the params still exist in localStorage, they need to be restored from localStorage. For this, we have a useEffect that gets the values of both params from localStorage and sets them in URL.
  • The problem is that even though both params exist in localStorage, only one is set in the URL (usually the second one). The second setParam call overwrites the first one.

Expected Behavior

  • Even if two calls to setParam are made one after another, if they are modifying separate queryParams, one call should not overwrite the other.
commented

Found the fix

If you add options: { enableBatching: true } to the <QueryParamProvider />, the issue gets fixed.