Reduce unnecessary calls to useSelector selector (#1804)

Author: sufian-slack

src/hooks/useSelector.ts

@@ -71,6 +71,11 @@ function useSelectorWithStoreAndSubscription<TStoreState, TSelectedState>(
     function checkForUpdates() {
       try {
         const newStoreState = store.getState()
+        // Avoid calling selector multiple times if the store's state has not changed
+        if (newStoreState === latestStoreState.current) {
+          return
+        }
+
         const newSelectedState = latestSelector.current!(newStoreState)
 
         if (equalityFn(newSelectedState, latestSelectedState.current)) {

test/hooks/useSelector.spec.tsx

@@ -72,14 +72,14 @@ describe('React', () => {
           })
 
           expect(result.current).toEqual(0)
-          expect(selector).toHaveBeenCalledTimes(2)
+          expect(selector).toHaveBeenCalledTimes(1)
 
           act(() => {
             normalStore.dispatch({ type: '' })
           })
 
           expect(result.current).toEqual(1)
-          expect(selector).toHaveBeenCalledTimes(3)
+          expect(selector).toHaveBeenCalledTimes(2)
         })
       })
 
@@ -283,6 +283,85 @@ describe('React', () => {
 
           expect(renderedItems.length).toBe(1)
         })
+
+        it('calls selector exactly once on mount and on update', () => {
+          interface StateType {
+            count: number
+          }
+          const store = createStore(({ count }: StateType = { count: 0 }) => ({
+            count: count + 1,
+          }))
+
+          let numCalls = 0
+          const selector = (s: StateType) => {
+            numCalls += 1
+            return s.count
+          }
+          const renderedItems = []
+
+          const Comp = () => {
+            const value = useSelector(selector)
+            renderedItems.push(value)
+            return <div />
+          }
+
+          rtl.render(
+            <ProviderMock store={store}>
+              <Comp />
+            </ProviderMock>
+          )
+
+          expect(numCalls).toBe(1)
+          expect(renderedItems.length).toEqual(1)
+
+          store.dispatch({ type: '' })
+
+          expect(numCalls).toBe(2)
+          expect(renderedItems.length).toEqual(2)
+        })
+
+        it('calls selector twice once on mount when state changes during render', () => {
+          interface StateType {
+            count: number
+          }
+          const store = createStore(({ count }: StateType = { count: 0 }) => ({
+            count: count + 1,
+          }))
+
+          let numCalls = 0
+          const selector = (s: StateType) => {
+            numCalls += 1
+            return s.count
+          }
+          const renderedItems = []
+
+          const Child = () => {
+            useLayoutEffect(() => {
+              store.dispatch({ type: '', count: 1 })
+            }, [])
+            return <div />
+          }
+
+          const Comp = () => {
+            const value = useSelector(selector)
+            renderedItems.push(value)
+            return (
+              <div>
+                <Child />
+              </div>
+            )
+          }
+
+          rtl.render(
+            <ProviderMock store={store}>
+              <Comp />
+            </ProviderMock>
+          )
+
+          // Selector first called on Comp mount, and then re-invoked after mount due to useLayoutEffect dispatching event
+          expect(numCalls).toBe(2)
+          expect(renderedItems.length).toEqual(2)
+        })
       })
 
       it('uses the latest selector', () => {