diff --git a/src/hooks/useSelector.js b/src/hooks/useSelector.js
index 0195df2a5..ee4168a02 100644
--- a/src/hooks/useSelector.js
+++ b/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
})
diff --git a/test/hooks/useSelector.spec.js b/test/hooks/useSelector.spec.js
index b0c8692b0..269a9f2a6 100644
--- a/test/hooks/useSelector.spec.js
+++ b/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