Feature/unmutable set value

src/useQueryParam.ts

@@ -32,6 +32,25 @@ export const useQueryParam = <D, D2 = D>(
 ): [D2 | undefined, (newValue: D, updateType?: UrlUpdateType) => void] => {
   const { history, location } = React.useContext(QueryParamContext);
 
+  // ref with current version history object
+  const refHistory = React.useRef<typeof history>(history);
+  React.useEffect(
+    () => {
+      refHistory.current = history;
+    },
+    [history]
+  );
+
+  // ref with current version location object
+  const refLocation = React.useRef<typeof location>(location);
+  React.useEffect(
+    () => {
+      refLocation.current = location;
+    },
+    [location]
+  );
+
+  // read in the raw query
   if (!rawQuery) {
     rawQuery = React.useMemo(() => {
       let pathname = {};
@@ -78,12 +97,12 @@ export const useQueryParam = <D, D2 = D>(
 
       updateUrlQuery(
         { [name]: newEncodedValue },
-        location,
-        history,
+        refLocation.current,
+        refHistory.current,
         updateType
       );
     },
-    [location]
+    []
   );
 
   return [decodedValue, setValue];

src/useQueryParams.ts

@@ -20,6 +20,24 @@ export const useQueryParams = <QPCMap extends QueryParamConfigMap>(
 ): [DecodedValueMap<QPCMap>, SetQuery<QPCMap>] => {
   const { history, location } = React.useContext(QueryParamContext);
 
+  // ref with current version history object
+  const refHistory = React.useRef<typeof history>(history);
+  React.useEffect(
+    () => {
+      refHistory.current = history;
+    },
+    [history]
+  );
+
+  // ref with current version location object
+  const refLocation = React.useRef<typeof location>(location);
+  React.useEffect(
+    () => {
+      refLocation.current = location;
+    },
+    [location]
+  );
+
   // read in the raw query
   const rawQuery = React.useMemo(
     () => parseQueryString(location.search) || {},
@@ -56,9 +74,9 @@ export const useQueryParams = <QPCMap extends QueryParamConfigMap>(
       );
 
       // update the URL
-      updateUrlQuery(encodedChanges, location, history, updateType);
+      updateUrlQuery(encodedChanges, refLocation.current, refHistory.current, updateType);
     },
-    [location]
+    []
   );
 
   // no longer Partial