Avoid unnecessary selector evaluations

Author: josepot

src/hooks/useSelector.js

@@ -50,12 +50,17 @@ export function useSelector(selector) {
   ])
 
   const latestSubscriptionCallbackError = useRef()
-  const latestSelector = useRef(selector)
+  const latestSelector = useRef()
+  const latestSelectedState = useRef()
 
-  let selectedState = undefined
+  let selectedState
 
   try {
-    selectedState = selector(store.getState())
+    selectedState =
+      selector !== latestSelector.current ||
+      latestSubscriptionCallbackError.current
+        ? selector(store.getState())
+        : latestSelectedState.current
   } catch (err) {
     let errorMessage = `An error occured while selecting the store state: ${
       err.message
@@ -70,8 +75,6 @@ export function useSelector(selector) {
     throw new Error(errorMessage)
   }
 
-  const latestSelectedState = useRef(selectedState)
-
   useIsomorphicLayoutEffect(() => {
     latestSelector.current = selector
     latestSelectedState.current = selectedState

test/hooks/useSelector.spec.js

@@ -1,6 +1,6 @@
 /*eslint-disable react/prop-types*/
 
-import React from 'react'
+import React, { useCallback, useReducer } from 'react'
 import { createStore } from 'redux'
 import { renderHook, act } from 'react-hooks-testing-library'
 import * as rtl from 'react-testing-library'
@@ -47,6 +47,29 @@ describe('React', () => {
       })
 
       describe('lifeycle interactions', () => {
+        it('always uses the latest state', () => {
+          store = createStore(c => c + 1, -1)
+
+          const Comp = () => {
+            const selector = useCallback(c => c + 1, [])
+            const value = useSelector(selector)
+            renderedItems.push(value)
+            return <div />
+          }
+
+          rtl.render(
+            <ProviderMock store={store}>
+              <Comp />
+            </ProviderMock>
+          )
+
+          expect(renderedItems).toEqual([1])
+
+          store.dispatch({ type: '' })
+
+          expect(renderedItems).toEqual([1, 2])
+        })
+
         it('subscribes to the store synchronously', () => {
           let rootSubscription
 
@@ -156,6 +179,39 @@ describe('React', () => {
         })
       })
 
+      it('uses the latest selector', () => {
+        let selectorId = 0
+        let forceRender
+
+        const Comp = () => {
+          const [, f] = useReducer(c => c + 1, 0)
+          forceRender = f
+          const renderedSelectorId = selectorId++
+          const value = useSelector(() => renderedSelectorId)
+          renderedItems.push(value)
+          return <div />
+        }
+
+        rtl.render(
+          <ProviderMock store={store}>
+            <Comp />
+          </ProviderMock>
+        )
+
+        expect(renderedItems).toEqual([0])
+
+        rtl.act(forceRender)
+        expect(renderedItems).toEqual([0, 1])
+
+        rtl.act(() => {
+          store.dispatch({ type: '' })
+        })
+        expect(renderedItems).toEqual([0, 1])
+
+        rtl.act(forceRender)
+        expect(renderedItems).toEqual([0, 1, 2])
+      })
+
       describe('edge cases', () => {
         it('ignores transient errors in selector (e.g. due to stale props)', () => {
           const spy = jest.spyOn(console, 'error').mockImplementation(() => {})