Merge branch 'Frezc-master'

Author: pbeshai

src/__tests__/useQueryParams-test.tsx

@@ -79,4 +79,18 @@ describe('useQueryParams', () => {
       baz: 'a,b', // ['a,'b'] as string = "a,b"
     });
   });
+
+  it('return persistent value if search not changed', () => {
+    const { wrapper, history } = setupWrapper({ foo: '123', bar: 'xxx' });
+    const { result, rerender } = renderHook(
+      () => useQueryParams({ foo: NumberParam, bar: StringParam }),
+      {
+        wrapper,
+      }
+    );
+    const [decodedQuery1] = result.current;
+    rerender();
+    const [decodedQuery2] = result.current;
+    expect(decodedQuery1 === decodedQuery2).toBe(true);
+  })
 });

src/useQueryParams.ts

@@ -26,16 +26,25 @@ export const useQueryParams = <QPCMap extends QueryParamConfigMap>(
     [location.search]
   );
 
-  // parse each parameter via usQueryParam
+  // parse each parameter via useQueryParam
+  // we reuse the logic to not recreate objects
   const paramNames = Object.keys(paramConfigMap);
-  const decodedValues: Partial<DecodedValueMap<QPCMap>> = {};
-  for (const paramName of paramNames) {
-    decodedValues[paramName] = useQueryParam(
-      paramName,
-      paramConfigMap[paramName],
-      rawQuery
-    )[0];
-  }
+  const paramValues = paramNames.map(
+    paramName =>
+      useQueryParam(paramName, paramConfigMap[paramName], rawQuery)[0]
+  );
+
+  // we use a memo here to prevent recreating the containing decodedValues object
+  // which would break === comparisons even if no values changed.
+  const decodedValues = React.useMemo(() => {
+    // iterate over the decoded values and build an object
+    const decodedValues: Partial<DecodedValueMap<QPCMap>> = {};
+    for (let i = 0; i < paramNames.length; ++i) {
+      decodedValues[paramNames[i]] = paramValues[i];
+    }
+
+    return decodedValues;
+  }, paramValues);
 
   // create a setter for updating multiple query params at once
   const setQuery = React.useCallback(