From 53ce1710f4bb88e27cd51c18d0951e455c493a8f Mon Sep 17 00:00:00 2001
From: daishi <daishi@axlight.com>
Date: Sun, 3 Mar 2019 01:41:23 +0900
Subject: [PATCH] handling stale props

---
 CHANGELOG.md  |  2 ++
 dist/index.js | 41 +++++++++++++++++++++++++++++------------
 src/index.js  | 33 ++++++++++++++++++++++++---------
 3 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9e53d10..68da305 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 # Change Log
 
 ## [Unreleased]
+### Changed
+- Better handling stale props issue
 
 ## [1.2.0] - 2019-02-25
 ### Changed
diff --git a/dist/index.js b/dist/index.js
index 68c8617..a56f056 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -76,21 +76,32 @@ var useReduxState = function useReduxState() {
   } // subscription
 
 
+  var callback = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    var callback = function callback() {
+    callback.current = function () {
       var changed = !(0, _proxyequal.proxyEqual)(lastState.current, store.getState(), lastTrapped.current.affected);
       (0, _proxyequal.drainDifference)();
 
       if (changed) {
         forceUpdate();
       }
-    }; // run once in case the state is already changed
+    };
+
+    var unsubscribe = store.subscribe(callback.current);
 
+    var cleanup = function cleanup() {
+      unsubscribe();
+      callback.current = null;
+    };
+
+    return cleanup;
+  }, [store]); // run callback in each commit phase in case something has changed.
 
-    callback();
-    var unsubscribe = store.subscribe(callback);
-    return unsubscribe;
-  }, [store]);
+  (0, _react.useEffect)(function () {
+    if (callback.current) {
+      callback.current();
+    }
+  });
   return trapped.state;
 };
 
@@ -113,8 +124,9 @@ var useReduxStateSimple = function useReduxStateSimple() {
   (0, _react.useEffect)(function () {
     lastState.current = state;
   });
+  var callback = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    var callback = function callback() {
+    callback.current = function () {
       var nextState = store.getState();
       var changed = Object.keys(used.current).find(function (key) {
         return lastState.current[key] !== nextState[key];
@@ -123,19 +135,24 @@ var useReduxStateSimple = function useReduxStateSimple() {
       if (changed) {
         forceUpdate();
       }
-    }; // run once in case the state is already changed
-
+    };
 
-    callback();
-    var unsubscribe = store.subscribe(callback);
+    var unsubscribe = store.subscribe(callback.current);
 
     var cleanup = function cleanup() {
       unsubscribe();
+      callback.current = null;
       used.current = {};
     };
 
     return cleanup;
-  }, [store]);
+  }, [store]); // run callback in each commit phase in case something has changed.
+
+  (0, _react.useEffect)(function () {
+    if (callback.current) {
+      callback.current();
+    }
+  });
   return new Proxy(state, handler);
 };
 
diff --git a/src/index.js b/src/index.js
index 394066c..453d49c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -71,8 +71,9 @@ export const useReduxState = () => {
     trappedMap.current.set(state, trapped);
   }
   // subscription
+  const callback = useRef(null);
   useEffect(() => {
-    const callback = () => {
+    callback.current = () => {
       const changed = !proxyEqual(
         lastState.current,
         store.getState(),
@@ -83,11 +84,19 @@ export const useReduxState = () => {
         forceUpdate();
       }
     };
-    // run once in case the state is already changed
-    callback();
-    const unsubscribe = store.subscribe(callback);
-    return unsubscribe;
+    const unsubscribe = store.subscribe(callback.current);
+    const cleanup = () => {
+      unsubscribe();
+      callback.current = null;
+    };
+    return cleanup;
   }, [store]);
+  // run callback in each commit phase in case something has changed.
+  useEffect(() => {
+    if (callback.current) {
+      callback.current();
+    }
+  });
   return trapped.state;
 };
 
@@ -106,8 +115,9 @@ export const useReduxStateSimple = () => {
   useEffect(() => {
     lastState.current = state;
   });
+  const callback = useRef(null);
   useEffect(() => {
-    const callback = () => {
+    callback.current = () => {
       const nextState = store.getState();
       const changed = Object.keys(used.current).find(
         key => lastState.current[key] !== nextState[key],
@@ -116,14 +126,19 @@ export const useReduxStateSimple = () => {
         forceUpdate();
       }
     };
-    // run once in case the state is already changed
-    callback();
-    const unsubscribe = store.subscribe(callback);
+    const unsubscribe = store.subscribe(callback.current);
     const cleanup = () => {
       unsubscribe();
+      callback.current = null;
       used.current = {};
     };
     return cleanup;
   }, [store]);
+  // run callback in each commit phase in case something has changed.
+  useEffect(() => {
+    if (callback.current) {
+      callback.current();
+    }
+  });
   return new Proxy(state, handler);
 };