Use deep equal to compare incoming data for referential stability

tannerlinsley · tannerlinsley · commit 89bec2039324 · 2020-05-01T11:43:38.000-06:00
Fixes TanStack#430
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,4 @@ yarn-debug.log*
 yarn-error.log*
 .history
 size-plugin.json
+stats.html
diff --git a/README.md b/README.md
@@ -34,8 +34,8 @@ Enjoy this library? Try them all! [React Table](https://github.com/tannerlinsley
 - Request Cancellation
 - [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) + Fetch-As-You-Render Query Prefetching
 - [Dedicated Devtools (React Query Devtools)](https://github.com/tannerlinsley/react-query-devtools)
-- <a href="https://bundlephobia.com/result?p=react-query@latest" target="\_parent">
-    <img alt="" src="https://badgen.net/bundlephobia/minzip/react-query@latest" />
+- 4kb - 6kb (depending on features imported) <a href="https://bundlephobia.com/result?p=react-query@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/react-query@latest" />
   </a>
 
 <details>
@@ -255,7 +255,6 @@ This library is being built and maintained by me, @tannerlinsley and I am always
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Installation](#installation)
 - [Defaults to keep in mind](#defaults-to-keep-in-mind)
 - [Queries](#queries)
@@ -335,6 +334,7 @@ Out of the box, React Query is configured with **aggressive but sane** defaults.
 - Query results that become unused (all instances of the query are unmounted) will still be cached in case they are used again for a default of 5 minutes before they are garbage collected. To change this, you can alter the default `cacheTime` for queries to something other than `1000 * 60 * 5` milliseconds.
 - Stale queries will automatically be refetched in the background **when the browser window is refocused by the user**. You can disable this using the `refetchOnWindowFocus` option in queries or the global config.
 - Queries that fail will silently and automatically be retried **3 times, with exponential backoff delay** before capturing and displaying an error to the UI. To change this, you can alter the default `retry` and `retryDelay` options for queries to something other than `3` and the default exponential backoff function.
+- Query results by default are deep compared to detect if data has actually changed and if not, the data reference remains unchanged to better help with value stabilization with regards to useMemo and useCallback. The default deep compare function use here (`config.isDataEqual`) only supports comparing JSON-compatible primitives. If you are dealing with any non-json compatible values in your query responses OR are seeing performance issues with the deep compare function, you should probably disable it (`config.isDataEqual = () => false`) or customize it to better fit your needs.
 
 # Queries
 
@@ -2218,7 +2218,7 @@ const promise = mutate(variables, {
   - Defaults to the global query config's `useErrorBoundary` value, which is `false`
   - Set this to true if you want mutation errors to be thrown in the render phase and propagate to the nearest error boundary
 - `selectedUseQueryOptions`
-  - *Selected* options of `useQuery` are also applicable here. E.g. `retry` and `retryDelay` can be used as described in the [`useQuery` section](#usequery). *Documentation of these options will be improved in the future.*
+  - _Selected_ options of `useQuery` are also applicable here. E.g. `retry` and `retryDelay` can be used as described in the [`useQuery` section](#usequery). _Documentation of these options will be improved in the future._
 
 ### Returns
 
@@ -2550,6 +2550,7 @@ const queryConfig = {
   refetchInterval: false,
   queryFnParamsFilter: args => filteredArgs,
   refetchOnMount: true,
+  isDataEqual: (previous, next) => true, // or false
 }
 
 function App() {
@@ -2604,6 +2605,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "formatReadme": "yarn doctoc",
     "doctoc": "npx doctoc --maxlevel 2 README.md",
     "jump2header": "npx @strdr4605/jump2header --header 'documentation' --start 'Installation' -e 2 --silent -l 2",
+    "stats": "open ./stats.html",
     "postinstall": "node ./scripts/postinstall.js || exit 0",
     "dtslint": "dtslint types"
   },
@@ -81,6 +82,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.2",
     "rollup-plugin-prettier": "^0.6.0",
     "rollup-plugin-size": "^0.2.2",
-    "rollup-plugin-terser": "^5.2.0"
+    "rollup-plugin-terser": "^5.2.0",
+    "rollup-plugin-visualizer": "^4.0.4"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,6 +1,11 @@
 import babel from 'rollup-plugin-babel'
 import { terser } from 'rollup-plugin-terser'
 import size from 'rollup-plugin-size'
+import externalDeps from 'rollup-plugin-peer-deps-external'
+import resolve from 'rollup-plugin-node-resolve'
+import commonJS from 'rollup-plugin-commonjs'
+import visualizer from 'rollup-plugin-visualizer'
+import replace from '@rollup/plugin-replace'
 
 const external = ['react']
 
@@ -17,7 +22,7 @@ export default [
       sourcemap: true,
     },
     external,
-    plugins: [babel()],
+    plugins: [resolve(), babel(), commonJS(), externalDeps()],
   },
   {
     input: 'src/index.js',
@@ -27,7 +32,7 @@ export default [
       sourcemap: true,
     },
     external,
-    plugins: [babel(), terser()],
+    plugins: [resolve(), babel(), commonJS(), externalDeps()],
   },
   {
     input: 'src/index.js',
@@ -39,7 +44,7 @@ export default [
       globals,
     },
     external,
-    plugins: [babel()],
+    plugins: [resolve(), babel(), commonJS(), externalDeps()],
   },
   {
     input: 'src/index.js',
@@ -51,6 +56,15 @@ export default [
       globals,
     },
     external,
-    plugins: [babel(), terser(), size()],
+    plugins: [
+      replace({ 'process.env.NODE_ENV': `"production"`, delimiters: ['', ''] }),
+      resolve(),
+      babel(),
+      commonJS(),
+      externalDeps(),
+      terser(),
+      size(),
+      visualizer(),
+    ],
   },
 ]
diff --git a/src/config.js b/src/config.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { noop, stableStringify, identity } from './utils'
+import { noop, stableStringify, identity, deepEqual } from './utils'
 
 export const configContext = React.createContext()
 
@@ -21,6 +21,7 @@ export const defaultConfigRef = {
     onError: noop,
     onSettled: noop,
     refetchOnMount: true,
+    isDataEqual: deepEqual,
   },
 }
 
diff --git a/src/queryCache.js b/src/queryCache.js
@@ -396,7 +396,9 @@ export function makeQueryCache() {
               ...query.queryVariables
             )
 
-            query.setData(data)
+            query.setData(old =>
+              query.config.isDataEqual(old, data) ? old : data
+            )
 
             query.instances.forEach(
               instance =>
diff --git a/src/tests/useQuery.test.js b/src/tests/useQuery.test.js
@@ -750,4 +750,61 @@ describe('useQuery', () => {
     const query = queryCache.getQuery('test')
     expect(query.cacheTimeout).toBe(undefined)
   })
+
+  it('should not cause memo churn when data does not change', async () => {
+    const queryFn = jest.fn()
+    const memoFn = jest.fn()
+    const originalVisibilityState = document.visibilityState
+
+    function mockVisibilityState(value) {
+      Object.defineProperty(document, 'visibilityState', {
+        value,
+        configurable: true,
+      })
+    }
+
+    // make page unfocused
+    mockVisibilityState('hidden')
+
+    function Page() {
+      const query = useQuery(
+        'test',
+        () =>
+          queryFn() || {
+            data: {
+              nested: true,
+            },
+          }
+      )
+
+      React.useMemo(() => {
+        memoFn()
+        console.log(query.data)
+        return query.data
+      }, [query.data])
+
+      return (
+        <div>
+          <div>status {query.status}</div>
+          <div>isFetching {query.isFetching ? 'true' : 'false'}</div>
+        </div>
+      )
+    }
+
+    const rendered = render(<Page />)
+
+    await waitForElement(() => rendered.getByText('status loading'))
+    await waitForElement(() => rendered.getByText('status success'))
+
+    act(() => {
+      // reset visibilityState to original value
+      mockVisibilityState(originalVisibilityState)
+      window.dispatchEvent(new FocusEvent('focus'))
+    })
+
+    await waitForElement(() => rendered.getByText('isFetching true'))
+    await waitForElement(() => rendered.getByText('isFetching false'))
+    expect(queryFn).toHaveBeenCalledTimes(2)
+    expect(memoFn).toHaveBeenCalledTimes(2)
+  })
 })
diff --git a/src/useInfiniteQuery.js b/src/useInfiniteQuery.js
@@ -29,19 +29,19 @@ export function useInfiniteQuery(...args) {
         rebuiltPageVariables.push(args)
       } else {
         // get an up-to-date cursor based on the previous data set
-        const nextCursor = getGetFetchMore()(data[data.length - 1], data);
+        const nextCursor = getGetFetchMore()(data[data.length - 1], data)
 
         // break early if there's no next cursor
         // otherwise we'll start from the beginning
         // which will cause unwanted duplication
         if (!nextCursor) {
-          break;
+          break
         }
 
         const pageArgs = [
           // remove the last argument (the previously saved cursor)
           ...args.slice(0, -1),
-          nextCursor
+          nextCursor,
         ]
 
         data.push(await originalQueryFn(...pageArgs))
diff --git a/src/utils.js b/src/utils.js
@@ -136,3 +136,39 @@ export function handleSuspense(queryInfo) {
     }
   }
 }
+
+// This deep-equal is directly based on https://github.com/epoberezkin/fast-deep-equal.
+// The parts for comparing any non-JSON-supported values has been removed
+export function deepEqual(a, b) {
+  if (a === b) return true
+
+  if (a && b && typeof a == 'object' && typeof b == 'object') {
+    var length, i, keys
+    if (Array.isArray(a)) {
+      length = a.length
+      // eslint-disable-next-line eqeqeq
+      if (length != b.length) return false
+      for (i = length; i-- !== 0; ) if (!deepEqual(a[i], b[i])) return false
+      return true
+    }
+
+    keys = Object.keys(a)
+    length = keys.length
+    if (length !== Object.keys(b).length) return false
+
+    for (i = length; i-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false
+
+    for (i = length; i-- !== 0; ) {
+      var key = keys[i]
+
+      if (!deepEqual(a[key], b[key])) return false
+    }
+
+    return true
+  }
+
+  // true if both NaN, false otherwise
+  // eslint-disable-next-line no-self-compare
+  return a !== a && b !== b
+}
diff --git a/yarn.lock b/yarn.lock
@@ -3242,6 +3242,11 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+escape-goat@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
+  integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
+
 escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -4229,6 +4234,11 @@ is-directory@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
   integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
+is-docker@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.0.0.tgz#2cb0df0e75e2d064fe1864c37cdeacb7b2dcf25b"
+  integrity sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ==
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -4340,6 +4350,11 @@ is-wsl@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
   integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
+is-wsl@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
+  integrity sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -5278,6 +5293,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
+nanoid@^3.0.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.3.tgz#b2bcfcfda4b4d6838bc22a0c8dd3c0a17a204c20"
+  integrity sha512-Zw8rTOUfh6FlKgkEbHiB1buOF2zOPOQyGirABUWn+9Z7m9PpyoLVkh6Ksc53vBjndINQ2+9LfRPaHxb/u45EGg==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -5562,6 +5582,14 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+open@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.0.3.tgz#db551a1af9c7ab4c7af664139930826138531c48"
+  integrity sha512-sP2ru2v0P290WFfv49Ap8MF6PkzGNnGlAwHweB4WR4mr5d2d0woiCluUeJ218w7/+PmoBy9JmYgD5A4mLcWOFA==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
@@ -5929,6 +5957,13 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+pupa@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.0.1.tgz#dbdc9ff48ffbea4a26a069b6f9f7abb051008726"
+  integrity sha512-hEJH0s8PXLY/cdXh66tNEQGndDrIKNqNC5xmrysZy3i5C3oEoLna7YAOad+7u125+zH1HNXUmGEkrhb3c2VriA==
+  dependencies:
+    escape-goat "^2.0.0"
+
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -6316,6 +6351,17 @@ rollup-plugin-terser@^5.2.0:
     serialize-javascript "^2.1.2"
     terser "^4.6.2"
 
+rollup-plugin-visualizer@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-4.0.4.tgz#69b9140c6faf46328997ed2d08b974252bf9d683"
+  integrity sha512-odkyLiVxCEXh4AWFSl75+pbIapzhEZkOVww8pKUgraOHicSH67MYMnAOHWQVK/BYeD1cCiF/0kk8/XNX2+LM9A==
+  dependencies:
+    nanoid "^3.0.1"
+    open "^7.0.3"
+    pupa "^2.0.0"
+    source-map "^0.7.3"
+    yargs "^15.0.0"
+
 rollup-pluginutils@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
@@ -6607,6 +6653,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 sourcemap-codec@^1.4.1:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -7403,7 +7454,7 @@ yargs@^13.3.0:
     y18n "^4.0.0"
     yargs-parser "^13.1.1"
 
-yargs@^15.1.0:
+yargs@^15.0.0, yargs@^15.1.0:
   version "15.3.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.1.tgz#9505b472763963e54afe60148ad27a330818e98b"
   integrity sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==

Original file line number	Diff line number	Diff line change
`@@ -396,7 +396,9 @@ export function makeQueryCache() {`
`396`	`396`	`...query.queryVariables`
`397`	`397`	`)`
`398`	`398`
`399`		`- query.setData(data)`
	`399`	`+ query.setData(old =>`
	`400`	`+ query.config.isDataEqual(old, data) ? old : data`
	`401`	`+ )`
`400`	`402`
`401`	`403`	`query.instances.forEach(`
`402`	`404`	`instance =>`