Add and use a countObjectKeys util

Author: markerikson

packages/toolkit/src/query/core/buildInitiate.ts

@@ -20,6 +20,7 @@ import type { BaseQueryError, QueryReturnValue } from '../baseQueryTypes'
 import type { QueryResultSelectorResult } from './buildSelectors'
 import type { Dispatch } from 'redux'
 import { isNotNullish } from '../utils/isNotNullish'
+import { countObjectKeys } from '../utils/countObjectKeys'
 
 declare module './module' {
   export interface ApiEndpointQuery<
@@ -392,7 +393,7 @@ You must add the middleware for RTK-Query to function correctly!`
 
           statePromise.then(() => {
             delete running[queryCacheKey]
-            if (!Object.keys(running).length) {
+            if (!countObjectKeys(running)) {
               runningQueries.delete(dispatch)
             }
           })
@@ -440,7 +441,7 @@ You must add the middleware for RTK-Query to function correctly!`
         running[requestId] = ret
         ret.then(() => {
           delete running[requestId]
-          if (!Object.keys(running).length) {
+          if (!countObjectKeys(running)) {
             runningMutations.delete(dispatch)
           }
         })
@@ -449,7 +450,7 @@ You must add the middleware for RTK-Query to function correctly!`
           ret.then(() => {
             if (running[fixedCacheKey] === ret) {
               delete running[fixedCacheKey]
-              if (!Object.keys(running).length) {
+              if (!countObjectKeys(running)) {
                 runningMutations.delete(dispatch)
               }
             }

packages/toolkit/src/query/core/buildMiddleware/invalidationByTags.ts

@@ -11,6 +11,7 @@ import type {
   ApiMiddlewareInternalHandler,
   InternalMiddlewareState,
 } from './types'
+import { countObjectKeys } from '../../utils/countObjectKeys'
 
 export const buildInvalidationByTagsHandler: InternalHandlerBuilder = ({
   reducerPath,
@@ -77,7 +78,7 @@ export const buildInvalidationByTagsHandler: InternalHandlerBuilder = ({
           internalState.currentSubscriptions[queryCacheKey] ?? {}
 
         if (querySubState) {
-          if (Object.keys(subscriptionSubState).length === 0) {
+          if (countObjectKeys(subscriptionSubState) === 0) {
             mwApi.dispatch(
               removeQueryResult({
                 queryCacheKey: queryCacheKey as QueryCacheKey,

packages/toolkit/src/query/core/buildMiddleware/windowEventHandling.ts

@@ -6,6 +6,7 @@ import type {
   InternalHandlerBuilder,
   SubMiddlewareApi,
 } from './types'
+import { countObjectKeys } from '../../utils/countObjectKeys'
 
 export const buildWindowEventHandler: InternalHandlerBuilder = ({
   reducerPath,
@@ -50,7 +51,7 @@ export const buildWindowEventHandler: InternalHandlerBuilder = ({
             state.config[type])
 
         if (shouldRefetch) {
-          if (Object.keys(subscriptionSubState).length === 0) {
+          if (countObjectKeys(subscriptionSubState) === 0) {
             api.dispatch(
               removeQueryResult({
                 queryCacheKey: queryCacheKey as QueryCacheKey,

packages/toolkit/src/query/react/module.ts

@@ -22,6 +22,7 @@ import {
 } from 'react-redux'
 import type { QueryKeys } from '../core/apiState'
 import type { PrefetchOptions } from '../core/module'
+import { countObjectKeys } from '../utils/countObjectKeys'
 
 export const reactHooksModuleName = /* @__PURE__ */ Symbol()
 export type ReactHooksModule = typeof reactHooksModuleName
@@ -147,7 +148,7 @@ export const reactHooksModule = ({
     let warned = false
     for (const hookName of hookNames) {
       // warn for old hook options
-      if (Object.keys(rest).length > 0) {
+      if (countObjectKeys(rest) > 0) {
         if ((rest as Partial<typeof hooks>)[hookName]) {
           if (!warned) {
             console.warn(

packages/toolkit/src/query/tests/buildHooks.test.tsx

@@ -38,6 +38,7 @@ import type { SerializedError } from '@reduxjs/toolkit'
 import { createListenerMiddleware, configureStore } from '@reduxjs/toolkit'
 import { delay } from '../../utils'
 import type { InternalMiddlewareState } from '../core/buildMiddleware/types'
+import { countObjectKeys } from '../utils/countObjectKeys'
 
 // Just setup a temporary in-memory counter for tests that `getIncrementedAmount`.
 // This can be used to test how many renders happen due to data changes or
@@ -149,7 +150,7 @@ function getSubscriptions() {
 function getSubscriptionCount(key: string) {
   const subscriptions = getSubscriptions()
   const subscriptionsForQueryArg = subscriptions[key] ?? {}
-  return Object.keys(subscriptionsForQueryArg).length
+  return countObjectKeys(subscriptionsForQueryArg)
 }
 
 beforeEach(() => {
@@ -1439,25 +1440,19 @@ describe('hooks tests', () => {
 
       await screen.findByText(/isUninitialized/i)
       expect(screen.queryByText('Yay')).toBeNull()
-      expect(Object.keys(storeRef.store.getState().api.mutations).length).toBe(
-        0
-      )
+      expect(countObjectKeys(storeRef.store.getState().api.mutations)).toBe(0)
 
       userEvent.click(screen.getByRole('button', { name: 'trigger' }))
 
       await screen.findByText(/isSuccess/i)
       expect(screen.queryByText('Yay')).not.toBeNull()
-      expect(Object.keys(storeRef.store.getState().api.mutations).length).toBe(
-        1
-      )
+      expect(countObjectKeys(storeRef.store.getState().api.mutations)).toBe(1)
 
       userEvent.click(screen.getByRole('button', { name: 'reset' }))
 
       await screen.findByText(/isUninitialized/i)
       expect(screen.queryByText('Yay')).toBeNull()
-      expect(Object.keys(storeRef.store.getState().api.mutations).length).toBe(
-        0
-      )
+      expect(countObjectKeys(storeRef.store.getState().api.mutations)).toBe(0)
     })
   })
 

packages/toolkit/src/query/tests/buildInitiate.test.tsx

@@ -31,15 +31,6 @@ function getSubscriptions() {
   ) as unknown as InternalMiddlewareState
   return internalState?.currentSubscriptions ?? {}
 }
-
-function getSubscriptionCount(key: string) {
-  const subscriptions = getSubscriptions()
-  const subscriptionsForQueryArg = subscriptions[key] ?? {}
-  return Object.keys(subscriptionsForQueryArg).length
-  //return Object.keys(storeRef.store.getState().api.subscriptions[key] || {})
-  //.length
-}
-
 function isRequestSubscribed(key: string, requestId: string) {
   const subscriptions = getSubscriptions()
   return !!subscriptions?.[key]?.[requestId]

packages/toolkit/src/query/tests/cacheCollection.test.ts

@@ -6,6 +6,7 @@ import {
   THIRTY_TWO_BIT_MAX_INT,
   THIRTY_TWO_BIT_MAX_TIMER_SECONDS,
 } from '../core/buildMiddleware/cacheCollection'
+import { countObjectKeys } from '../utils/countObjectKeys'
 
 beforeAll(() => {
   vi.useFakeTimers()
@@ -177,10 +178,10 @@ function storeForApi<
   let hadQueries = false
   store.subscribe(() => {
     const queryState = store.getState().api.queries
-    if (hadQueries && Object.keys(queryState).length === 0) {
+    if (hadQueries && countObjectKeys(queryState) === 0) {
       onCleanup()
     }
-    hadQueries = hadQueries || Object.keys(queryState).length > 0
+    hadQueries = hadQueries || countObjectKeys(queryState) > 0
   })
   return { api, store }
 }

packages/toolkit/src/query/tests/cleanup.test.tsx

@@ -7,6 +7,7 @@ import { createApi, QueryStatus } from '@reduxjs/toolkit/query/react'
 import { render, waitFor, act, screen } from '@testing-library/react'
 import { setupApiStore } from './helpers'
 import { InternalMiddlewareState } from '../core/buildMiddleware/types'
+import { countObjectKeys } from '../utils/countObjectKeys'
 
 const tick = () => new Promise((res) => setImmediate(res))
 
@@ -207,7 +208,7 @@ test('Minimizes the number of subscription dispatches when multiple components a
 
   const subscriptions = getSubscriptionsA()
 
-  expect(Object.keys(subscriptions!).length).toBe(NUM_LIST_ITEMS)
+  expect(countObjectKeys(subscriptions!)).toBe(NUM_LIST_ITEMS)
 
   expect(actionTypes).toEqual([
     'api/config/middlewareRegistered',

packages/toolkit/src/query/utils/countObjectKeys.ts

@@ -0,0 +1,14 @@
+// Fast method for counting an object's keys
+// without resorting to `Object.keys(obj).length
+// Will this make a big difference in perf? Probably not
+// But we can save a few allocations.
+
+export function countObjectKeys(obj: Record<any, any>) {
+  let count = 0
+
+  for (const _key in obj) {
+    count++
+  }
+
+  return count
+}