feat: skip unnecessary updates by default #234 (#236)

* feat: skip unnecessary updates by default #234

* chore: remove batching option form test

Author: pbeshai

packages/use-query-params/src/__tests__/routers/shared.tsx

@@ -448,5 +448,35 @@ export function testSpec(renderWithRouter: any) {
       );
       expect(numRenders).toBe(2);
     });
+
+    it('doesnt update when the search string is the same', async () => {
+      let numRenders = 0;
+      const TestComponent = () => {
+        const [foo, setFoo] = useQueryParam('foo');
+
+        numRenders += 1;
+        return (
+          <div>
+            {JSON.stringify({ foo })}
+            <button
+              onClick={() => {
+                setFoo('foo1');
+              }}
+            >
+              Change
+            </button>
+          </div>
+        );
+      };
+      const { queryByText, getByText } = renderWithRouter(
+        <TestComponent />,
+        '?foo=foo1'
+      );
+
+      expect(queryByText(/{"foo":"foo1"}/)).toBeTruthy();
+      getByText(/Change/).click();
+      await waitFor(() => expect(queryByText(/{"foo":"foo1"}/)).toBeTruthy());
+      expect(numRenders).toBe(1);
+    });
   });
 }

packages/use-query-params/src/options.ts

@@ -14,6 +14,7 @@ export const defaultOptions: QueryParamOptionsWithRequired = {
   includeAllParams: false,
   removeDefaultsFromUrl: false,
   enableBatching: false,
+  skipUpdateWhenNoChange: true,
 };
 
 export interface QueryParamOptions {
@@ -22,6 +23,8 @@ export interface QueryParamOptions {
   updateType?: UrlUpdateType;
   includeKnownParams?: boolean;
   includeAllParams?: boolean;
+  /** whether sets that result in no change to the location search string should be ignored (default: true) */
+  skipUpdateWhenNoChange?: boolean;
   params?: QueryParamConfigMap;
 
   /** when a value equals its default, do not encode it in the URL when updating */

packages/use-query-params/src/updateSearchString.ts

@@ -155,6 +155,7 @@ export function enqueueUpdate(
     scheduleTask(() => {
       const updates = updateQueue.slice();
       updateQueue.length = 0;
+      const initialSearchString = updates[0].currentSearchString;
 
       let searchString: string | undefined;
       for (let i = 0; i < updates.length; ++i) {
@@ -165,6 +166,14 @@ export function enqueueUpdate(
         searchString = getUpdatedSearchString(modifiedUpdate);
       }
 
+      // do not update unnecessarily #234
+      if (
+        args.options.skipUpdateWhenNoChange &&
+        searchString === initialSearchString
+      ) {
+        return;
+      }
+
       updateSearchString({
         searchString: searchString ?? '',
         adapter: updates[updates.length - 1].adapter,