fix useSelector race condition with memoized selector when dispatching in child components useLayoutEffect as well as cDM/cDU (#1536)

Co-authored-by: Tim Dorr <[email protected]>

Author: dai-shi

src/hooks/useSelector.js

@@ -21,16 +21,19 @@ function useSelectorWithStoreAndSubscription(
 
   const latestSubscriptionCallbackError = useRef()
   const latestSelector = useRef()
+  const latestStoreState = useRef()
   const latestSelectedState = useRef()
 
+  const storeState = store.getState()
   let selectedState
 
   try {
     if (
       selector !== latestSelector.current ||
+      storeState !== latestStoreState.current ||
       latestSubscriptionCallbackError.current
     ) {
-      selectedState = selector(store.getState())
+      selectedState = selector(storeState)
     } else {
       selectedState = latestSelectedState.current
     }
@@ -44,6 +47,7 @@ function useSelectorWithStoreAndSubscription(
 
   useIsomorphicLayoutEffect(() => {
     latestSelector.current = selector
+    latestStoreState.current = storeState
     latestSelectedState.current = selectedState
     latestSubscriptionCallbackError.current = undefined
   })

test/hooks/useSelector.spec.js

@@ -1,6 +1,6 @@
 /*eslint-disable react/prop-types*/
 
-import React, { useCallback, useReducer } from 'react'
+import React, { useCallback, useReducer, useLayoutEffect } from 'react'
 import { createStore } from 'redux'
 import { renderHook, act } from '@testing-library/react-hooks'
 import * as rtl from '@testing-library/react'
@@ -156,6 +156,42 @@ describe('React', () => {
         })
       })
 
+      it('works properly with memoized selector with dispatch in Child useLayoutEffect', () => {
+        store = createStore(c => c + 1, -1)
+
+        const Comp = () => {
+          const selector = useCallback(c => c, [])
+          const count = useSelector(selector)
+          renderedItems.push(count)
+          return <Child parentCount={count} />
+        }
+
+        const Child = ({ parentCount }) => {
+          useLayoutEffect(() => {
+            if (parentCount === 1) {
+              store.dispatch({ type: '' })
+            }
+          }, [parentCount])
+          return <div>{parentCount}</div>
+        }
+
+        rtl.render(
+          <ProviderMock store={store}>
+            <Comp />
+          </ProviderMock>
+        )
+
+        // The first render doesn't trigger dispatch
+        expect(renderedItems).toEqual([0])
+
+        // This dispatch triggers another dispatch in useLayoutEffect
+        rtl.act(() => {
+          store.dispatch({ type: '' })
+        })
+
+        expect(renderedItems).toEqual([0, 1, 2])
+      })
+
       describe('performance optimizations and bail-outs', () => {
         it('defaults to ref-equality to prevent unnecessary updates', () => {
           const state = {}