Merge pull request #1951 from jspurlin/jspurlin/passOwnPropsToASE

Author: markerikson

docs/api/connect.md

@@ -233,7 +233,7 @@ connect(mapStateToProps, mapDispatchToProps, null, { context: MyContext })(
 )
 ```
 
-#### `areStatesEqual: (next: Object, prev: Object) => boolean`
+#### `areStatesEqual: (next: Object, prev: Object, nextOwnProps: Object, prevOwnProps: Object) => boolean`
 
 - default value: `strictEqual: (next, prev) => prev === next`
 
@@ -244,7 +244,7 @@ const areStatesEqual = (next, prev) =>
   prev.entities.todos === next.entities.todos
 ```
 
-You may wish to override `areStatesEqual` if your `mapStateToProps` function is computationally expensive and is also only concerned with a small slice of your state. The example above will effectively ignore state changes for everything but that slice of state.
+You may wish to override `areStatesEqual` if your `mapStateToProps` function is computationally expensive and is also only concerned with a small slice of your state. The example above will effectively ignore state changes for everything but that slice of state. Additionally, `areStatesEqual` provides `nextOwnProps` and `prevOwnProps` to allow for more effective scoping of your state which your connected component is interested in, if needed.
 
 This would likely impact the other equality checks as well, depending on your `mapStateToProps` function.
 

src/components/connect.tsx

@@ -231,7 +231,12 @@ export interface ConnectOptions<
 > {
   forwardRef?: boolean
   context?: typeof ReactReduxContext
-  areStatesEqual?: (nextState: State, prevState: State) => boolean
+  areStatesEqual?: (
+    nextState: State,
+    prevState: State,
+    nextOwnProps: TOwnProps,
+    prevOwnProps: TOwnProps
+  ) => boolean
 
   areOwnPropsEqual?: (
     nextOwnProps: TOwnProps,
@@ -696,7 +701,7 @@ function connect<
         notifyNestedSubs,
       ])
 
-      let actualChildProps: uSES
+      let actualChildProps: Record<string, unknown>
 
       try {
         actualChildProps = useSyncExternalStore(

src/connect/selectorFactory.ts

@@ -1,7 +1,7 @@
 import type { Dispatch, Action } from 'redux'
 import type { ComponentType } from 'react'
 import verifySubselectors from './verifySubselectors'
-import type { EqualityFn } from '../types'
+import type { EqualityFn, ExtendedEqualityFn } from '../types'
 
 export type SelectorFactory<S, TProps, TOwnProps, TFactoryOptions> = (
   dispatch: Dispatch<Action<unknown>>,
@@ -59,7 +59,7 @@ export type MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps> = (
 ) => TMergedProps
 
 interface PureSelectorFactoryComparisonOptions<TStateProps, TOwnProps, State> {
-  readonly areStatesEqual: EqualityFn<State>
+  readonly areStatesEqual: ExtendedEqualityFn<State, TOwnProps>
   readonly areStatePropsEqual: EqualityFn<TStateProps>
   readonly areOwnPropsEqual: EqualityFn<TOwnProps>
 }
@@ -132,7 +132,12 @@ export function pureFinalPropsSelectorFactory<
 
   function handleSubsequentCalls(nextState: State, nextOwnProps: TOwnProps) {
     const propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps)
-    const stateChanged = !areStatesEqual(nextState, state)
+    const stateChanged = !areStatesEqual(
+      nextState,
+      state,
+      nextOwnProps,
+      ownProps
+    )
     state = nextState
     ownProps = nextOwnProps
 

src/types.ts

@@ -15,6 +15,8 @@ export type FixTypeLater = any
 
 export type EqualityFn<T> = (a: T, b: T) => boolean
 
+export type ExtendedEqualityFn<T, P> = (a: T, b: T, c: P, d: P) => boolean
+
 export type AnyIfEmpty<T extends object> = keyof T extends never ? any : T
 
 export type DistributiveOmit<T, K extends keyof T> = T extends unknown