diff --git a/package-lock.json b/package-lock.json index ff19a0ea..c8690cba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6704,6 +6704,11 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "dequal": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz", + "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==" + }, "detect-indent": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz", diff --git a/package.json b/package.json index 3127c555..5631d36e 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ }, "dependencies": { "@babel/runtime": "7.13.9", + "dequal": "2.0.2", "lru-cache": "6.0.0" }, "peerDependencies": { diff --git a/src/index.js b/src/index.js index 4bd59a84..c5c258a4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react' import StaticAxios from 'axios' import LRU from 'lru-cache' +import { dequal as deepEqual } from 'dequal/lite' const actions = { REQUEST_START: 'REQUEST_START', @@ -197,17 +198,17 @@ export function makeUseAxios(configureOptions) { ) } - function useAxios(config, options) { - config = React.useMemo( - () => configToObject(config), + function useAxios(_config, _options) { + const config = React.useMemo( + () => configToObject(_config), // eslint-disable-next-line react-hooks/exhaustive-deps - [JSON.stringify(config)] + useDeepCompareMemoize(_config) ) - options = React.useMemo( - () => ({ ...defaultOptions, ...options }), + const options = React.useMemo( + () => ({ ...defaultOptions, ..._options }), // eslint-disable-next-line react-hooks/exhaustive-deps - [JSON.stringify(options)] + useDeepCompareMemoize(_options) ) const cancelSourceRef = React.useRef() @@ -267,3 +268,15 @@ export function makeUseAxios(configureOptions) { return [state, refetch, cancelOutstandingRequest] } } + +function useDeepCompareMemoize(value) { + const ref = React.useRef() + const signalRef = React.useRef(0) + + if (!deepEqual(value, ref.current)) { + ref.current = value + signalRef.current += 1 + } + + return [signalRef.current] +}