fix: reduce the number of renders (#754)

Author: boschni

src/core/query.js

@@ -10,6 +10,7 @@ import {
   statusIdle,
   Console,
   getStatusBools,
+  shallowEqual,
 } from './utils'
 import { makeQueryInstance } from './queryInstance'
 
@@ -63,9 +64,14 @@ export function makeQuery({
   }
 
   query.dispatch = action => {
-    query.state = queryReducer(query.state, action)
-    query.instances.forEach(d => d.onStateUpdate(query.state))
-    notifyGlobalListeners(query)
+    const newState = queryReducer(query.state, action)
+
+    // Only update state if something has changed
+    if (!shallowEqual(query.state, newState)) {
+      query.state = newState
+      query.instances.forEach(d => d.onStateUpdate(query.state))
+      notifyGlobalListeners(query)
+    }
   }
 
   query.scheduleStaleTimeout = () => {
@@ -143,11 +149,19 @@ export function makeQuery({
   query.setState = updater => query.dispatch({ type: actionSetState, updater })
 
   query.setData = updater => {
+    const isStale = query.config.staleTime === 0
+
     // Set data and mark it as cached
-    query.dispatch({ type: actionSuccess, updater })
+    query.dispatch({
+      type: actionSuccess,
+      updater,
+      isStale,
+    })
 
-    // Schedule a fresh invalidation!
-    query.scheduleStaleTimeout()
+    if (!isStale) {
+      // Schedule a fresh invalidation!
+      query.scheduleStaleTimeout()
+    }
   }
 
   query.clear = () => {
@@ -172,11 +186,11 @@ export function makeQuery({
   const tryFetchData = async (fn, ...args) => {
     try {
       // Perform the query
-      const promise = fn(...query.config.queryFnParamsFilter(args))
+      const promiseOrValue = fn(...query.config.queryFnParamsFilter(args))
 
-      query.cancelPromises = () => promise.cancel?.()
+      query.cancelPromises = () => promiseOrValue?.cancel?.()
 
-      const data = await promise
+      const data = await promiseOrValue
       delete query.shouldContinueRetryOnFocus
 
       delete query.cancelPromises
@@ -187,16 +201,16 @@ export function makeQuery({
       delete query.cancelPromises
       if (query.cancelled) throw query.cancelled
 
-      // If we fail, increase the failureCount
-      query.dispatch({ type: actionFailed })
-
       // Do we need to retry the request?
       if (
         query.config.retry === true ||
-        query.state.failureCount <= query.config.retry ||
+        query.state.failureCount < query.config.retry ||
         (typeof query.config.retry === 'function' &&
           query.config.retry(query.state.failureCount, error))
       ) {
+        // If we retry, increase the failureCount
+        query.dispatch({ type: actionFailed })
+
         // Only retry if the document is visible
         if (!isDocumentVisible()) {
           // set this flag to continue retries on focus
@@ -454,14 +468,15 @@ function switchActions(state, action) {
         status: statusSuccess,
         data: functionalUpdate(action.updater, state.data),
         error: null,
-        isStale: false,
+        isStale: action.isStale,
         isFetching: false,
         updatedAt: Date.now(),
         failureCount: 0,
       }
     case actionError:
       return {
         ...state,
+        failureCount: state.failureCount + 1,
         isFetching: false,
         isStale: true,
         ...(!action.cancelled && {

src/core/tests/queryCache.test.js

@@ -47,7 +47,7 @@ describe('queryCache', () => {
   })
 
   test('prefetchQuery should not force fetch', async () => {
-    queryCache.setQueryData('key', 'og')
+    queryCache.setQueryData('key', 'og', { staleTime: 100 })
     const fetchFn = () => Promise.resolve('new')
     const first = await queryCache.prefetchQuery(
       'key',
@@ -77,24 +77,28 @@ describe('queryCache', () => {
     ).rejects.toEqual(new Error('error'))
   })
 
-  test('should notify listeners when new query is added', () => {
+  test('should notify listeners when new query is added', async () => {
     const callback = jest.fn()
 
     queryCache.subscribe(callback)
 
     queryCache.prefetchQuery('test', () => 'data')
 
+    await sleep(100)
+
     expect(callback).toHaveBeenCalled()
   })
 
-  test('should include the queryCache and query when notifying listeners', () => {
+  test('should include the queryCache and query when notifying listeners', async () => {
     const callback = jest.fn()
 
     queryCache.subscribe(callback)
 
     queryCache.prefetchQuery('test', () => 'data')
     const query = queryCache.getQuery('test')
 
+    await sleep(100)
+
     expect(callback).toHaveBeenCalledWith(queryCache, query)
   })
 
@@ -136,6 +140,21 @@ describe('queryCache', () => {
     expect(queryCache.getQuery('key')).toBeFalsy()
   })
 
+  test('setQueryData should schedule stale timeout, if staleTime is set', async () => {
+    queryCache.setQueryData('key', 'test data', { staleTime: 10 })
+    expect(queryCache.getQuery('key').staleTimeout).not.toBeUndefined()
+  })
+
+  test('setQueryData should not schedule stale timeout by default', async () => {
+    queryCache.setQueryData('key', 'test data')
+    expect(queryCache.getQuery('key').staleTimeout).toBeUndefined()
+  })
+
+  test('setQueryData should not schedule stale timeout, if staleTime is set to `Infinity`', async () => {
+    queryCache.setQueryData('key', 'test data', { staleTime: Infinity })
+    expect(queryCache.getQuery('key').staleTimeout).toBeUndefined()
+  })
+
   test('setQueryData schedules stale timeouts appropriately', async () => {
     queryCache.setQueryData('key', 'test data', { staleTime: 100 })
 
@@ -174,7 +193,7 @@ describe('queryCache', () => {
   test('stale timeout dispatch is not called if query is no longer in the query cache', async () => {
     const queryKey = 'key'
     const fetchData = () => Promise.resolve('data')
-    await queryCache.prefetchQuery(queryKey, fetchData)
+    await queryCache.prefetchQuery(queryKey, fetchData, { staleTime: 100 })
     const query = queryCache.getQuery(queryKey)
     expect(query.state.isStale).toBe(false)
     queryCache.removeQueries(queryKey)

src/core/tests/utils.test.js

@@ -1,5 +1,5 @@
 import { setConsole, queryCache, queryCaches } from '../'
-import { deepEqual } from '../utils'
+import { deepEqual, shallowEqual } from '../utils'
 
 describe('core/utils', () => {
   afterEach(() => {
@@ -28,17 +28,76 @@ describe('core/utils', () => {
     setConsole(console)
   })
 
-  it('deepequal should return `false` for different dates', () => {
-    const date1 = new Date(2020, 3, 1)
-    const date2 = new Date(2020, 3, 2)
+  describe('deepEqual', () => {
+    it('should return `true` for equal objects', () => {
+      const a = { a: { b: 'b' }, c: 'c', d: [{ d: 'd ' }] }
+      const b = { a: { b: 'b' }, c: 'c', d: [{ d: 'd ' }] }
+      expect(deepEqual(a, b)).toEqual(true)
+    })
 
-    expect(deepEqual(date1, date2)).toEqual(false)
+    it('should return `false` for non equal objects', () => {
+      const a = { a: { b: 'b' }, c: 'c' }
+      const b = { a: { b: 'c' }, c: 'c' }
+      expect(deepEqual(a, b)).toEqual(false)
+    })
+
+    it('should return `false` for different dates', () => {
+      const date1 = new Date(2020, 3, 1)
+      const date2 = new Date(2020, 3, 2)
+      expect(deepEqual(date1, date2)).toEqual(false)
+    })
+
+    it('return `true` for equal dates', () => {
+      const date1 = new Date(2020, 3, 1)
+      const date2 = new Date(2020, 3, 1)
+      expect(deepEqual(date1, date2)).toEqual(true)
+    })
   })
 
-  it('should return `true` for equal dates', () => {
-    const date1 = new Date(2020, 3, 1)
-    const date2 = new Date(2020, 3, 1)
+  describe('shallowEqual', () => {
+    it('should return `true` for empty objects', () => {
+      expect(shallowEqual({}, {})).toEqual(true)
+    })
+
+    it('should return `true` for equal values', () => {
+      expect(shallowEqual(1, 1)).toEqual(true)
+    })
+
+    it('should return `true` for equal arrays', () => {
+      expect(shallowEqual([1, 2], [1, 2])).toEqual(true)
+    })
+
+    it('should return `true` for equal shallow objects', () => {
+      const a = { a: 'a', b: 'b' }
+      const b = { a: 'a', b: 'b' }
+      expect(shallowEqual(a, b)).toEqual(true)
+    })
+
+    it('should return `true` for equal deep objects with same identities', () => {
+      const deep = { b: 'b' }
+      const a = { a: deep, c: 'c' }
+      const b = { a: deep, c: 'c' }
+      expect(shallowEqual(a, b)).toEqual(true)
+    })
+
+    it('should return `false` for non equal values', () => {
+      expect(shallowEqual(1, 2)).toEqual(false)
+    })
+
+    it('should return `false` for equal arrays', () => {
+      expect(shallowEqual([1, 2], [1, 3])).toEqual(false)
+    })
+
+    it('should return `false` for non equal shallow objects', () => {
+      const a = { a: 'a', b: 'b' }
+      const b = { a: 'a', b: 'c' }
+      expect(shallowEqual(a, b)).toEqual(false)
+    })
 
-    expect(deepEqual(date1, date2)).toEqual(true)
+    it('should return `false` for equal deep objects with different identities', () => {
+      const a = { a: { b: 'b' }, c: 'c' }
+      const b = { a: { b: 'b' }, c: 'c' }
+      expect(shallowEqual(a, b)).toEqual(false)
+    })
   })
 })

src/core/utils.js

@@ -90,18 +90,33 @@ export function getQueryArgs(args) {
   return [queryKey, queryFn ? { ...config, queryFn } : config, ...rest]
 }
 
+export function deepEqual(a, b) {
+  return equal(a, b, true)
+}
+
+export function shallowEqual(a, b) {
+  return equal(a, b, false)
+}
+
 // 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) {
+function equal(a, b, deep, depth = 0) {
   if (a === b) return true
 
-  if (a && b && typeof a == 'object' && typeof b == 'object') {
+  if (
+    (deep || !depth) &&
+    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
+      for (i = length; i-- !== 0; )
+        if (!equal(a[i], b[i], deep, depth + 1)) return false
       return true
     }
 
@@ -118,7 +133,7 @@ export function deepEqual(a, b) {
     for (i = length; i-- !== 0; ) {
       var key = keys[i]
 
-      if (!deepEqual(a[key], b[key])) return false
+      if (!equal(a[key], b[key], deep, depth + 1)) return false
     }
 
     return true

src/react/tests/useInfiniteQuery.test.js

@@ -28,6 +28,72 @@ describe('useInfiniteQuery', () => {
     queryCaches.forEach(cache => cache.clear({ notify: false }))
   })
 
+  it('should return the correct states for a successful query', async () => {
+    let count = 0
+    const states = []
+
+    function Page() {
+      const state = useInfiniteQuery(
+        'items',
+        (key, nextId = 0) => fetchItems(nextId, count++),
+        {
+          getFetchMore: (lastGroup, allGroups) => Boolean(lastGroup.nextId),
+        }
+      )
+
+      states.push(state)
+
+      return (
+        <div>
+          <h1>Status: {state.status}</h1>
+        </div>
+      )
+    }
+
+    const rendered = render(<Page />)
+
+    await waitFor(() => rendered.getByText('Status: success'))
+
+    expect(states[0]).toMatchObject({
+      clear: expect.any(Function),
+      data: undefined,
+      error: null,
+      failureCount: 0,
+      fetchMore: expect.any(Function),
+      isError: false,
+      isFetching: true,
+      isIdle: false,
+      isLoading: true,
+      isStale: true,
+      isSuccess: false,
+      refetch: expect.any(Function),
+      status: 'loading',
+    })
+
+    expect(states[1]).toMatchObject({
+      clear: expect.any(Function),
+      canFetchMore: true,
+      data: [
+        {
+          items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+          nextId: 1,
+          ts: 0,
+        },
+      ],
+      error: null,
+      failureCount: 0,
+      fetchMore: expect.any(Function),
+      isError: false,
+      isFetching: false,
+      isIdle: false,
+      isLoading: false,
+      isStale: true,
+      isSuccess: true,
+      refetch: expect.any(Function),
+      status: 'success',
+    })
+  })
+
   it('should allow you to fetch more pages', async () => {
     function Page() {
       const fetchCountRef = React.useRef(0)