fix(use-query-params): correct infinite loop when search is empty (#94)

Author: chambo-e

packages/use-query-params/src/__tests__/index.js

@@ -239,4 +239,25 @@ describe('useQueryParam', () => {
       names: ['John', '', 'Jane', '', '', ''],
     })
   })
+
+  test('should work correctly when search is empty', () => {
+    jest.useFakeTimers()
+    const { result } = renderHook(() => useQueryParam(), {
+      wrapper: wrapper({ search: '' }),
+    })
+
+    act(() => {
+      result.current.setQueryParams({ name: 'John' })
+    })
+    jest.runAllTimers()
+    expect(result.current.queryParams).toEqual({
+      name: 'John',
+    })
+
+    act(() => {
+      result.current.replaceQueryparams({})
+    })
+    jest.runAllTimers()
+    expect(result.current.queryParams).toEqual({})
+  })
 })

packages/use-query-params/src/index.js

@@ -50,8 +50,11 @@ const useQueryParams = () => {
   useEffect(() => {
     const handler = setTimeout(() => {
       const stringifiedParams = stringyFormat(state)
-      if (search !== `?${stringifiedParams}`)
+      const searchToCompare = search || '?'
+
+      if (searchToCompare !== `?${stringifiedParams}`) {
         replace(`${pathname}?${stringifiedParams}`)
+      }
     }, 500)
 
     return () => {