useSelector: Allow optional compararison function

Export shallowEqual function

Author: josepot

package-lock.json

@@ -14,6 +14,8 @@ import Subscription from '../utils/Subscription'
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
+const refEquality = (a, b) => a === b
+
 /**
  * A hook to access the redux store's state. This hook takes a selector function
  * as an argument. The selector is called with the store state.
@@ -23,6 +25,7 @@ const useIsomorphicLayoutEffect =
  * useful if you provide a selector that memoizes values).
  *
  * @param {Function} selector the selector function
+ * @param {Function} equalityFn the function that will be used to determine equality
  *
  * @returns {any} the selected state
  *
@@ -37,7 +40,7 @@ const useIsomorphicLayoutEffect =
  *   return <div>{counter}</div>
  * }
  */
-export function useSelector(selector) {
+export function useSelector(selector, equalityFn = refEquality) {
   invariant(selector, `You must pass a selector to useSelectors`)
 
   const { store, subscription: contextSub } = useReduxContext()
@@ -82,7 +85,7 @@ export function useSelector(selector) {
       try {
         const newSelectedState = latestSelector.current(store.getState())
 
-        if (newSelectedState === latestSelectedState.current) {
+        if (equalityFn(newSelectedState, latestSelectedState.current)) {
           return
         }
 

src/hooks/useSelector.js

@@ -9,6 +9,7 @@ import { useStore } from './hooks/useStore'
 
 import { setBatch } from './utils/batch'
 import { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates'
+import shallowEqual from './utils/shallowEqual'
 
 setBatch(batch)
 
@@ -20,5 +21,6 @@ export {
   batch,
   useDispatch,
   useSelector,
-  useStore
+  useStore,
+  shallowEqual
 }

src/index.js

@@ -4,7 +4,11 @@ import React from 'react'
 import { createStore } from 'redux'
 import { renderHook, act } from 'react-hooks-testing-library'
 import * as rtl from 'react-testing-library'
-import { Provider as ProviderMock, useSelector } from '../../src/index.js'
+import {
+  Provider as ProviderMock,
+  useSelector,
+  shallowEqual
+} from '../../src/index.js'
 import { useReduxContext } from '../../src/hooks/useReduxContext'
 
 describe('React', () => {
@@ -128,7 +132,7 @@ describe('React', () => {
       })
 
       describe('performance optimizations and bail-outs', () => {
-        it('should compare the selected state by reference to prevent unnecessary updates', () => {
+        it('defaults to ref-equality to prevent unnecessary updates', () => {
           const state = {}
           store = createStore(() => state)
 
@@ -150,6 +154,33 @@ describe('React', () => {
 
           expect(renderedItems.length).toBe(1)
         })
+
+        it('allows other equality functions to prevent unnecessary updates', () => {
+          store = createStore(
+            ({ count, stable } = { count: -1, stable: {} }) => ({
+              count: count + 1,
+              stable
+            })
+          )
+
+          const Comp = () => {
+            const value = useSelector(s => Object.keys(s), shallowEqual)
+            renderedItems.push(value)
+            return <div />
+          }
+
+          rtl.render(
+            <ProviderMock store={store}>
+              <Comp />
+            </ProviderMock>
+          )
+
+          expect(renderedItems.length).toBe(1)
+
+          store.dispatch({ type: '' })
+
+          expect(renderedItems.length).toBe(1)
+        })
       })
 
       describe('edge cases', () => {