Experimental useSelector to avoid stale props

Author: dai-shi

src/hooks/useSelector.js

@@ -1,6 +1,5 @@
-import { useReducer, useRef, useMemo, useContext } from 'react'
+import { useReducer, useContext } from 'react'
 import { useReduxContext as useDefaultReduxContext } from './useReduxContext'
-import Subscription from '../utils/Subscription'
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
 import { ReactReduxContext } from '../components/Context'
 
@@ -10,72 +9,29 @@ function useSelectorWithStoreAndSubscription(
   selector,
   equalityFn,
   store,
-  contextSub
+  subscription
 ) {
-  const [, forceRender] = useReducer(s => s + 1, 0)
-
-  const subscription = useMemo(() => new Subscription(store, contextSub), [
-    store,
-    contextSub
-  ])
-
-  const latestSubscriptionCallbackError = useRef()
-  const latestSelector = useRef()
-  const latestSelectedState = useRef()
-
-  let selectedState
-
-  try {
-    if (
-      selector !== latestSelector.current ||
-      latestSubscriptionCallbackError.current
-    ) {
-      selectedState = selector(store.getState())
-    } else {
-      selectedState = latestSelectedState.current
-    }
-  } catch (err) {
-    if (latestSubscriptionCallbackError.current) {
-      err.message += `\nThe error may be correlated with this previous error:\n${latestSubscriptionCallbackError.current.stack}\n\n`
-    }
-
-    throw err
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    latestSelector.current = selector
-    latestSelectedState.current = selectedState
-    latestSubscriptionCallbackError.current = undefined
-  })
-
-  useIsomorphicLayoutEffect(() => {
-    function checkForUpdates() {
-      try {
-        const newSelectedState = latestSelector.current(store.getState())
-
-        if (equalityFn(newSelectedState, latestSelectedState.current)) {
-          return
-        }
-
-        latestSelectedState.current = newSelectedState
-      } catch (err) {
-        // we ignore all errors here, since when the component
-        // is re-rendered, the selectors are called again, and
-        // will throw again, if neither props nor store state
-        // changed
-        latestSubscriptionCallbackError.current = err
+  const [selectedState, dispatch] = useReducer(
+    prevSelectedState => {
+      const nextState = store.getState()
+      const nextSelectedState = selector(nextState)
+      if (equalityFn(prevSelectedState, nextSelectedState)) {
+        return prevSelectedState
       }
+      return nextSelectedState
+    },
+    null,
+    () => selector(store.getState())
+  )
 
-      forceRender({})
-    }
-
-    subscription.onStateChange = checkForUpdates
+  useIsomorphicLayoutEffect(() => {
+    subscription.onStateChange = dispatch
     subscription.trySubscribe()
 
-    checkForUpdates()
+    dispatch()
 
     return () => subscription.tryUnsubscribe()
-  }, [store, subscription])
+  }, [subscription])
 
   return selectedState
 }

test/integration/stale-props.spec.js

@@ -0,0 +1,77 @@
+/*eslint-disable react/prop-types*/
+
+import React from 'react'
+import { createStore } from 'redux'
+import { Provider, useSelector } from '../../src/index.js'
+import * as rtl from '@testing-library/react'
+
+describe('React', () => {
+  describe('stale props with useSelector', () => {
+    it('ignores transient errors in selector (e.g. due to stale props)', () => {
+      const Parent = () => {
+        const count = useSelector(count => count)
+        return <Child parentCount={count} />
+      }
+
+      const Child = ({ parentCount }) => {
+        const result = useSelector(count => {
+          if (count !== parentCount) {
+            throw new Error()
+          }
+
+          return count + parentCount
+        })
+
+        return <div>{result}</div>
+      }
+
+      const store = createStore((count = -1) => count + 1)
+
+      const App = () => (
+        <Provider store={store}>
+          <Parent />
+        </Provider>
+      )
+
+      rtl.render(<App />)
+
+      rtl.act(() => {
+        expect(() => store.dispatch({ type: '' })).not.toThrowError()
+      })
+    })
+
+    it('ensures consistency of state and props in selector', () => {
+      let selectorSawInconsistencies = false
+
+      const Parent = () => {
+        const count = useSelector(count => count)
+        return <Child parentCount={count} />
+      }
+
+      const Child = ({ parentCount }) => {
+        const result = useSelector(count => {
+          selectorSawInconsistencies =
+            selectorSawInconsistencies || count !== parentCount
+          return count + parentCount
+        })
+
+        return <div>{result}</div>
+      }
+
+      const store = createStore((count = -1) => count + 1)
+
+      const App = () => (
+        <Provider store={store}>
+          <Parent />
+        </Provider>
+      )
+
+      rtl.render(<App />)
+
+      rtl.act(() => {
+        store.dispatch({ type: '' })
+      })
+      expect(selectorSawInconsistencies).toBe(false)
+    })
+  })
+})