feat: maintain referential integrity of refetch function

.eslintrc

@@ -5,6 +5,7 @@
     "plugin:import/recommended",
     "plugin:prettier/recommended"
   ],
+  "plugins": ["import", "react-hooks"],
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module"
@@ -18,7 +19,8 @@
     "Promise": true
   },
   "rules": {
-    "valid-jsdoc": 2
-  },
-  "plugins": ["import"]
+    "valid-jsdoc": 2,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  }
 }

package.json

@@ -61,6 +61,7 @@
     "eslint-config-prettier": "6.4.0",
     "eslint-plugin-import": "2.18.2",
     "eslint-plugin-prettier": "3.1.1",
+    "eslint-plugin-react-hooks": "2.1.2",
     "husky": "3.0.8",
     "jest": "24.9.0",
     "lint-staged": "9.4.2",

src/index.js

@@ -123,6 +123,8 @@ export default function useAxios(config, options) {
     }
   }
 
+  const stringifiedConfig = JSON.stringify(config)
+
   options = { manual: false, useCache: true, ...options }
 
   const [state, dispatch] = React.useReducer(
@@ -138,14 +140,20 @@ export default function useAxios(config, options) {
     if (!options.manual) {
       executeRequest(config, options, dispatch)
     }
-  }, [JSON.stringify(config)])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stringifiedConfig])
 
-  return [
-    state,
+  const refetch = React.useCallback(
     (configOverride, options) => {
-      options = { useCache: false, ...options }
+      return executeRequest(
+        { ...config, ...configOverride },
+        { useCache: false, ...options },
+        dispatch
+      )
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [stringifiedConfig]
+  )
 
-      return executeRequest({ ...config, ...configOverride }, options, dispatch)
-    }
-  ]
+  return [state, refetch]
 }

src/index.test.js

@@ -85,6 +85,18 @@ it('should refetch', async () => {
   expect(axios).toHaveBeenCalledTimes(2)
 })
 
+it('should return the same reference to the fetch function', async () => {
+  axios.mockResolvedValue({ data: 'whatever' })
+
+  const { result, rerender } = renderHook(() => useAxios(''))
+
+  const firstRefetch = result.current[1]
+
+  rerender()
+
+  expect(result.current[1]).toBe(firstRefetch)
+})
+
 describe('manual option', () => {
   it('should set loading to false', async () => {
     const { result } = renderHook(() => useAxios('', { manual: true }))