Replace shallowEqual with reference equality in useSelector (#1288)

* Replace shallowEqual with reference equality in useSelector

* useSelector: Allow optional compararison function
Export shallowEqual function

Author: perrin4869

package-lock.json

@@ -1,7 +1,6 @@
 import { useReducer, useRef, useEffect, useMemo, useLayoutEffect } from 'react'
 import invariant from 'invariant'
 import { useReduxContext } from './useReduxContext'
-import shallowEqual from '../utils/shallowEqual'
 import Subscription from '../utils/Subscription'
 
 // React currently throws a warning when using useLayoutEffect on the server.
@@ -15,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.
@@ -24,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
  *
@@ -38,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()
@@ -83,7 +85,7 @@ export function useSelector(selector) {
       try {
         const newSelectedState = latestSelector.current(store.getState())
 
-        if (shallowEqual(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,30 @@ describe('React', () => {
       })
 
       describe('performance optimizations and bail-outs', () => {
-        it('should shallowly compare the selected state to prevent unnecessary updates', () => {
+        it('defaults to ref-equality to prevent unnecessary updates', () => {
+          const state = {}
+          store = createStore(() => state)
+
+          const Comp = () => {
+            const value = useSelector(s => s)
+            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)
+        })
+
+        it('allows other equality functions to prevent unnecessary updates', () => {
           store = createStore(
             ({ count, stable } = { count: -1, stable: {} }) => ({
               count: count + 1,
@@ -137,7 +164,7 @@ describe('React', () => {
           )
 
           const Comp = () => {
-            const value = useSelector(s => Object.keys(s))
+            const value = useSelector(s => Object.keys(s), shallowEqual)
             renderedItems.push(value)
             return <div />
           }