From 7f92f1674e8108d0ff1e074c9c793cc4fd0850e3 Mon Sep 17 00:00:00 2001
From: daishi <daishi@axlight.com>
Date: Mon, 20 Jan 2020 23:41:51 +0900
Subject: [PATCH 1/4] Experimental useSelector to avoid stale props

---
 src/hooks/useSelector.js             | 78 ++++++----------------------
 test/integration/stale-props.spec.js | 77 +++++++++++++++++++++++++++
 2 files changed, 94 insertions(+), 61 deletions(-)
 create mode 100644 test/integration/stale-props.spec.js

diff --git a/src/hooks/useSelector.js b/src/hooks/useSelector.js
index bfb2d70fe..35deccd55 100644
--- a/src/hooks/useSelector.js
+++ b/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
 }
diff --git a/test/integration/stale-props.spec.js b/test/integration/stale-props.spec.js
new file mode 100644
index 000000000..464ee01e3
--- /dev/null
+++ b/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)
+    })
+  })
+})

From 58f69addbee3d3bbf990675c4fd548cff4d97fa6 Mon Sep 17 00:00:00 2001
From: daishi <daishi@axlight.com>
Date: Tue, 21 Jan 2020 11:12:20 +0900
Subject: [PATCH 2/4] put back subscription

---
 src/hooks/useSelector.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/hooks/useSelector.js b/src/hooks/useSelector.js
index 35deccd55..52bb96da8 100644
--- a/src/hooks/useSelector.js
+++ b/src/hooks/useSelector.js
@@ -1,5 +1,6 @@
-import { useReducer, useContext } from 'react'
+import { useReducer, useMemo, useContext } from 'react'
 import { useReduxContext as useDefaultReduxContext } from './useReduxContext'
+import Subscription from '../utils/Subscription'
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
 import { ReactReduxContext } from '../components/Context'
 
@@ -9,9 +10,9 @@ function useSelectorWithStoreAndSubscription(
   selector,
   equalityFn,
   store,
-  subscription
+  contextSub
 ) {
-  const [selectedState, dispatch] = useReducer(
+  const [selectedState, checkForUpdates] = useReducer(
     prevSelectedState => {
       const nextState = store.getState()
       const nextSelectedState = selector(nextState)
@@ -20,15 +21,20 @@ function useSelectorWithStoreAndSubscription(
       }
       return nextSelectedState
     },
-    null,
-    () => selector(store.getState())
+    store.getState(),
+    selector
   )
 
+  const subscription = useMemo(() => new Subscription(store, contextSub), [
+    store,
+    contextSub
+  ])
+
   useIsomorphicLayoutEffect(() => {
-    subscription.onStateChange = dispatch
+    subscription.onStateChange = checkForUpdates
     subscription.trySubscribe()
 
-    dispatch()
+    checkForUpdates()
 
     return () => subscription.tryUnsubscribe()
   }, [subscription])

From b68e5ebaefdc4e09cd6eae4da3d0bb255b817b9a Mon Sep 17 00:00:00 2001
From: daishi <daishi@axlight.com>
Date: Tue, 28 Jan 2020 00:24:29 +0900
Subject: [PATCH 3/4] apply the same technique in #1509

---
 src/hooks/useSelector.js | 42 ++++++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/hooks/useSelector.js b/src/hooks/useSelector.js
index 52bb96da8..15dd54ca6 100644
--- a/src/hooks/useSelector.js
+++ b/src/hooks/useSelector.js
@@ -1,7 +1,6 @@
-import { useReducer, useMemo, useContext } from 'react'
+import { useReducer, useEffect, useMemo, useContext } from 'react'
 import { useReduxContext as useDefaultReduxContext } from './useReduxContext'
 import Subscription from '../utils/Subscription'
-import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
 import { ReactReduxContext } from '../components/Context'
 
 const refEquality = (a, b) => a === b
@@ -12,32 +11,51 @@ function useSelectorWithStoreAndSubscription(
   store,
   contextSub
 ) {
-  const [selectedState, checkForUpdates] = useReducer(
-    prevSelectedState => {
-      const nextState = store.getState()
-      const nextSelectedState = selector(nextState)
-      if (equalityFn(prevSelectedState, nextSelectedState)) {
-        return prevSelectedState
+  const [state, dispatch] = useReducer(
+    (prevState, storeState) => {
+      const nextSelectedState = selector(storeState)
+      if (equalityFn(nextSelectedState, prevState.selectedState)) {
+        // bail out
+        return prevState
+      }
+      return {
+        selector,
+        storeState,
+        selectedState: nextSelectedState
       }
-      return nextSelectedState
     },
     store.getState(),
-    selector
+    storeState => ({
+      selector,
+      storeState,
+      selectedState: selector(storeState)
+    })
   )
 
+  let selectedState = state.selectedState
+  if (state.selector !== selector) {
+    const nextSelectedState = selector(state.storeState)
+    if (!equalityFn(nextSelectedState, state.selectedState)) {
+      selectedState = nextSelectedState
+      // schedule another update
+      dispatch(state.storeState)
+    }
+  }
+
   const subscription = useMemo(() => new Subscription(store, contextSub), [
     store,
     contextSub
   ])
 
-  useIsomorphicLayoutEffect(() => {
+  useEffect(() => {
+    const checkForUpdates = () => dispatch(store.getState())
     subscription.onStateChange = checkForUpdates
     subscription.trySubscribe()
 
     checkForUpdates()
 
     return () => subscription.tryUnsubscribe()
-  }, [subscription])
+  }, [store, subscription])
 
   return selectedState
 }

From 719d97ea365a8b352f789bb7b3d27ccb2d859d7a Mon Sep 17 00:00:00 2001
From: daishi <daishi@axlight.com>
Date: Sat, 8 Feb 2020 23:39:08 +0900
Subject: [PATCH 4/4] useReducer cheat mode demo to solve stale props

---
 src/hooks/useSelector.js | 37 ++++++++++++++-----------------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/hooks/useSelector.js b/src/hooks/useSelector.js
index 15dd54ca6..326e41284 100644
--- a/src/hooks/useSelector.js
+++ b/src/hooks/useSelector.js
@@ -1,4 +1,4 @@
-import { useReducer, useEffect, useMemo, useContext } from 'react'
+import { useReducer, useEffect, useMemo, useContext, useRef } from 'react'
 import { useReduxContext as useDefaultReduxContext } from './useReduxContext'
 import Subscription from '../utils/Subscription'
 import { ReactReduxContext } from '../components/Context'
@@ -11,44 +11,35 @@ function useSelectorWithStoreAndSubscription(
   store,
   contextSub
 ) {
+  const dispatching = useRef(false)
   const [state, dispatch] = useReducer(
     (prevState, storeState) => {
+      if (dispatching.current) {
+        // schedule update
+        return { ...prevState }
+      }
       const nextSelectedState = selector(storeState)
       if (equalityFn(nextSelectedState, prevState.selectedState)) {
         // bail out
         return prevState
       }
-      return {
-        selector,
-        storeState,
-        selectedState: nextSelectedState
-      }
+      return { selectedState: nextSelectedState }
     },
     store.getState(),
-    storeState => ({
-      selector,
-      storeState,
-      selectedState: selector(storeState)
-    })
+    storeState => ({ selectedState: selector(storeState) })
   )
 
-  let selectedState = state.selectedState
-  if (state.selector !== selector) {
-    const nextSelectedState = selector(state.storeState)
-    if (!equalityFn(nextSelectedState, state.selectedState)) {
-      selectedState = nextSelectedState
-      // schedule another update
-      dispatch(state.storeState)
-    }
-  }
-
   const subscription = useMemo(() => new Subscription(store, contextSub), [
     store,
     contextSub
   ])
 
   useEffect(() => {
-    const checkForUpdates = () => dispatch(store.getState())
+    const checkForUpdates = () => {
+      dispatching.current = true
+      dispatch(store.getState())
+      dispatching.current = false
+    }
     subscription.onStateChange = checkForUpdates
     subscription.trySubscribe()
 
@@ -57,7 +48,7 @@ function useSelectorWithStoreAndSubscription(
     return () => subscription.tryUnsubscribe()
   }, [store, subscription])
 
-  return selectedState
+  return state.selectedState
 }
 
 /**