Avoid unnecessary selector evaluations

src/hooks/useSelector.js

@@ -52,10 +52,12 @@ export function useSelector(selector) {
   const latestSubscriptionCallbackError = useRef()
   const latestSelector = useRef(selector)
 
-  let selectedState = undefined
+  let latestSelectedState = useRef()
 
   try {
-    selectedState = selector(store.getState())
+    latestSelectedState.current = useMemo(() => selector(store.getState()), [
+      selector
+    ])
   } catch (err) {
     let errorMessage = `An error occured while selecting the store state: ${
       err.message
@@ -70,11 +72,8 @@ export function useSelector(selector) {
     throw new Error(errorMessage)
   }
 
-  const latestSelectedState = useRef(selectedState)
-
   useIsomorphicLayoutEffect(() => {
     latestSelector.current = selector
-    latestSelectedState.current = selectedState
     latestSubscriptionCallbackError.current = undefined
   })
 
@@ -107,5 +106,5 @@ export function useSelector(selector) {
     return () => subscription.tryUnsubscribe()
   }, [store, subscription])
 
-  return selectedState
+  return latestSelectedState.current
 }

test/hooks/useSelector.spec.js

@@ -183,6 +183,34 @@ describe('React', () => {
 
           expect(renderedItems).toEqual([0, 0])
         })
+
+        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>
+          )
+
+          rtl.act(forceRender)
+
+          // this line verifies the susbcription callback uses the same memoized selector and therefore
+          // does not cause a re-render
+          store.dispatch({ type: '' })
+
+          expect(renderedItems).toEqual([0, 1])
+        })
       })
 
       describe('edge cases', () => {