Add devModeChecks to useSelector

Author: aryaemami59

src/components/Context.ts

@@ -1,18 +1,16 @@
 import type { Context } from 'react'
 import * as React from 'react'
 import type { Action, Store, UnknownAction } from 'redux'
-import type { DevModeCheckFrequency } from '../hooks/useSelector'
 import type { Subscription } from '../utils/Subscription'
+import type { ProviderProps } from './Provider'
 
 export interface ReactReduxContextValue<
   SS = any,
   A extends Action<string> = UnknownAction
-> {
+> extends Pick<ProviderProps, 'stabilityCheck' | 'identityFunctionCheck'> {
   store: Store<SS, A>
   subscription: Subscription
   getServerState?: () => SS
-  stabilityCheck: DevModeCheckFrequency
-  identityFunctionCheck: DevModeCheckFrequency
 }
 
 const ContextKey = Symbol.for(`react-redux-context`)

src/components/Provider.tsx

@@ -29,10 +29,24 @@ export interface ProviderProps<
    */
   context?: Context<ReactReduxContextValue<S, A> | null>
 
-  /** Global configuration for the `useSelector` stability check */
+  /**
+   * Determines the frequency of stability checks for all selectors.
+   * This setting overrides the global configuration for
+   * the `useSelector` stability check, allowing you to specify how often
+   * these checks should occur in development mode.
+   *
+   * @since 8.1.0
+   */
   stabilityCheck?: DevModeCheckFrequency
 
-  /** Global configuration for the `useSelector` identity function check */
+  /**
+   * Determines the frequency of identity function checks for all selectors.
+   * This setting overrides the global configuration for
+   * the `useSelector` identity function check, allowing you to specify how often
+   * these checks should occur in development mode.
+   *
+   * @since 9.0.0
+   */
   identityFunctionCheck?: DevModeCheckFrequency
 
   children: ReactNode

src/hooks/useSelector.ts

@@ -18,10 +18,49 @@ import {
  */
 export type DevModeCheckFrequency = 'never' | 'once' | 'always'
 
+/**
+ * Represents the configuration for development mode checks.
+ *
+ * @since 9.0.0
+ * @internal
+ */
+export interface DevModeChecks {
+  /**
+   * Overrides the global stability check for the selector.
+   * - `once` - Run only the first time the selector is called.
+   * - `always` - Run every time the selector is called.
+   * - `never` - Never run the stability check.
+   *
+   * @default 'once'
+   *
+   * @since 8.1.0
+   */
+  stabilityCheck: DevModeCheckFrequency
+
+  /**
+   * Overrides the global identity function check for the selector.
+   * - `once` - Run only the first time the selector is called.
+   * - `always` - Run every time the selector is called.
+   * - `never` - Never run the identity function check.
+   *
+   * @default 'once'
+   *
+   * @since 9.0.0
+   */
+  identityFunctionCheck: DevModeCheckFrequency
+}
+
 export interface UseSelectorOptions<Selected = unknown> {
   equalityFn?: EqualityFn<Selected>
-  stabilityCheck?: DevModeCheckFrequency
-  identityFunctionCheck?: DevModeCheckFrequency
+
+  /**
+   * `useSelector` performs additional checks in development mode to help
+   * identify and warn about potential issues in selector behavior. This
+   * option allows you to customize the behavior of these checks per selector.
+   *
+   * @since 9.0.0
+   */
+  devModeChecks?: Partial<DevModeChecks>
 }
 
 export interface UseSelector {
@@ -65,13 +104,10 @@ export function createSelectorHook(
       | EqualityFn<NoInfer<Selected>>
       | UseSelectorOptions<NoInfer<Selected>> = {}
   ): Selected {
-    const {
-      equalityFn = refEquality,
-      stabilityCheck = undefined,
-      identityFunctionCheck = undefined,
-    } = typeof equalityFnOrOptions === 'function'
-      ? { equalityFn: equalityFnOrOptions }
-      : equalityFnOrOptions
+    const { equalityFn = refEquality, devModeChecks = {} } =
+      typeof equalityFnOrOptions === 'function'
+        ? { equalityFn: equalityFnOrOptions }
+        : equalityFnOrOptions
     if (process.env.NODE_ENV !== 'production') {
       if (!selector) {
         throw new Error(`You must pass a selector to useSelector`)
@@ -90,8 +126,8 @@ export function createSelectorHook(
       store,
       subscription,
       getServerState,
-      stabilityCheck: globalStabilityCheck,
-      identityFunctionCheck: globalIdentityFunctionCheck,
+      stabilityCheck,
+      identityFunctionCheck,
     } = useReduxContext()
 
     const firstRun = React.useRef(true)
@@ -101,10 +137,14 @@ export function createSelectorHook(
         [selector.name](state: TState) {
           const selected = selector(state)
           if (process.env.NODE_ENV !== 'production') {
-            const finalStabilityCheck =
-              typeof stabilityCheck === 'undefined'
-                ? globalStabilityCheck
-                : stabilityCheck
+            const {
+              identityFunctionCheck: finalIdentityFunctionCheck,
+              stabilityCheck: finalStabilityCheck,
+            } = {
+              stabilityCheck,
+              identityFunctionCheck,
+              ...devModeChecks,
+            }
             if (
               finalStabilityCheck === 'always' ||
               (finalStabilityCheck === 'once' && firstRun.current)
@@ -131,10 +171,6 @@ export function createSelectorHook(
                 )
               }
             }
-            const finalIdentityFunctionCheck =
-              typeof identityFunctionCheck === 'undefined'
-                ? globalIdentityFunctionCheck
-                : identityFunctionCheck
             if (
               finalIdentityFunctionCheck === 'always' ||
               (finalIdentityFunctionCheck === 'once' && firstRun.current)
@@ -161,7 +197,7 @@ export function createSelectorHook(
           return selected
         },
       }[selector.name],
-      [selector, globalStabilityCheck, stabilityCheck]
+      [selector, stabilityCheck, devModeChecks.stabilityCheck]
     )
 
     const selectedState = useSyncExternalStoreWithSelector(

test/hooks/useSelector.spec.tsx

@@ -1,34 +1,34 @@
 /*eslint-disable react/prop-types*/
 
+import * as rtl from '@testing-library/react'
+import type { DispatchWithoutAction, FunctionComponent, ReactNode } from 'react'
 import React, {
+  Suspense,
   useCallback,
-  useReducer,
-  useLayoutEffect,
-  useState,
   useContext,
-  Suspense,
   useEffect,
+  useLayoutEffect,
+  useReducer,
+  useState,
 } from 'react'
+import type { Action, AnyAction, Store } from 'redux'
 import { createStore } from 'redux'
-import * as rtl from '@testing-library/react'
+import type { UseSelectorOptions } from '../../src/hooks/useSelector'
+import type {
+  ProviderProps,
+  ReactReduxContextValue,
+  Subscription,
+  TypedUseSelectorHook,
+} from '../../src/index'
 import {
   Provider,
-  useSelector,
-  useDispatch,
-  shallowEqual,
+  ReactReduxContext,
   connect,
   createSelectorHook,
-  ReactReduxContext,
-} from '../../src/index'
-import type {
-  TypedUseSelectorHook,
-  ReactReduxContextValue,
-  ProviderProps,
-  Subscription,
+  shallowEqual,
+  useDispatch,
+  useSelector,
 } from '../../src/index'
-import type { FunctionComponent, DispatchWithoutAction, ReactNode } from 'react'
-import type { Store, AnyAction, Action } from 'redux'
-import type { UseSelectorOptions } from '../../src/hooks/useSelector'
 
 // disable checks by default
 function ProviderMock<A extends Action<any> = AnyAction, S = unknown>({
@@ -984,7 +984,7 @@ describe('React', () => {
               <ProviderMock stabilityCheck="once" store={normalStore}>
                 <RenderSelector
                   selector={selector}
-                  options={{ stabilityCheck: 'never' }}
+                  options={{ devModeChecks: { stabilityCheck: 'never' } }}
                 />
               </ProviderMock>
             )
@@ -1014,7 +1014,7 @@ describe('React', () => {
               <ProviderMock stabilityCheck="once" store={normalStore}>
                 <RenderSelector
                   selector={selector}
-                  options={{ stabilityCheck: 'always' }}
+                  options={{ devModeChecks: { stabilityCheck: 'always' } }}
                 />
               </ProviderMock>
             )

test/typetests/hooks.tsx

@@ -1,42 +1,27 @@
 /* eslint-disable @typescript-eslint/no-unused-vars, no-inner-declarations */
 
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import type { Store, Dispatch, AnyAction } from '@reduxjs/toolkit'
+import type { AnyAction, Dispatch, Store } from '@reduxjs/toolkit'
 import { configureStore } from '@reduxjs/toolkit'
+import * as React from 'react'
 import type {
   ReactReduxContextValue,
   Selector,
   TypedUseSelectorHook,
 } from '../../src/index'
 import {
-  connect,
-  ConnectedProps,
-  Provider,
-  DispatchProp,
-  MapStateToProps,
-  ReactReduxContext,
+  createDispatchHook,
+  createSelectorHook,
+  createStoreHook,
   shallowEqual,
-  MapDispatchToProps,
   useDispatch,
   useSelector,
   useStore,
-  createDispatchHook,
-  createSelectorHook,
-  createStoreHook,
 } from '../../src/index'
 
 import type { AppDispatch, RootState } from './counterApp'
-import {
-  CounterState,
-  counterSlice,
-  increment,
-  incrementAsync,
-  AppThunk,
-  fetchCount,
-} from './counterApp'
+import { incrementAsync } from './counterApp'
 
-import { expectType, expectExactType } from '../typeTestHelpers'
+import { expectExactType, expectType } from '../typeTestHelpers'
 
 function preTypedHooksSetup() {
   // Standard hooks setup
@@ -172,7 +157,7 @@ function testUseSelector() {
   const correctlyInferred: State = useSelector(selector, shallowEqual)
   const correctlyInferred2: State = useSelector(selector, {
     equalityFn: shallowEqual,
-    stabilityCheck: 'never',
+    devModeChecks: { stabilityCheck: 'never' },
   })
   // @ts-expect-error
   const inferredTypeIsNotString: string = useSelector(selector, shallowEqual)