add shallowEqual to React.memo as a workaround

Author: dai-shi

README.md

@@ -56,65 +56,65 @@ in your browser, and click the button very quickly. (check the console log)
 
 ```
   react-redux
-    ✓ check1: updated properly (3533ms)
-    ✕ check2: no tearing during update (22ms)
+    ✓ check1: updated properly (3185ms)
+    ✕ check2: no tearing during update (20ms)
     ✓ check3: ability to interrupt render
-    ✕ check4: proper update after interrupt (5152ms)
+    ✓ check4: proper update after interrupt (1464ms)
   reactive-react-redux
-    ✓ check1: updated properly (3626ms)
+    ✓ check1: updated properly (3147ms)
     ✓ check2: no tearing during update (1ms)
     ✓ check3: ability to interrupt render
-    ✓ check4: proper update after interrupt (1464ms)
+    ✓ check4: proper update after interrupt (1157ms)
   react-tracked
-    ✓ check1: updated properly (8303ms)
+    ✓ check1: updated properly (8271ms)
     ✓ check2: no tearing during update (1ms)
-    ✓ check3: ability to interrupt render (1ms)
-    ✓ check4: proper update after interrupt (1195ms)
+    ✓ check3: ability to interrupt render
+    ✓ check4: proper update after interrupt (1120ms)
   constate
-    ✓ check1: updated properly (8382ms)
+    ✓ check1: updated properly (8198ms)
     ✓ check2: no tearing during update (1ms)
     ✓ check3: ability to interrupt render
-    ✓ check4: proper update after interrupt (2401ms)
+    ✓ check4: proper update after interrupt (2187ms)
   unstated-next
-    ✓ check1: updated properly (8720ms)
+    ✓ check1: updated properly (8231ms)
     ✓ check2: no tearing during update (1ms)
     ✓ check3: ability to interrupt render
-    ✓ check4: proper update after interrupt (1255ms)
+    ✓ check4: proper update after interrupt (2341ms)
   zustand
-    ✓ check1: updated properly (3613ms)
-    ✕ check2: no tearing during update (22ms)
-    ✓ check3: ability to interrupt render (1ms)
-    ✕ check4: proper update after interrupt (5138ms)
+    ✓ check1: updated properly (3186ms)
+    ✕ check2: no tearing during update (20ms)
+    ✓ check3: ability to interrupt render
+    ✓ check4: proper update after interrupt (1459ms)
   react-sweet-state
-    ✓ check1: updated properly (9351ms)
-    ✕ check2: no tearing during update (2ms)
+    ✓ check1: updated properly (10614ms)
+    ✕ check2: no tearing during update (1ms)
     ✕ check3: ability to interrupt render (1ms)
-    ✕ check4: proper update after interrupt (5203ms)
+    ✓ check4: proper update after interrupt (1092ms)
   storeon
-    ✓ check1: updated properly (3415ms)
+    ✓ check1: updated properly (3144ms)
     ✕ check2: no tearing during update (20ms)
-    ✓ check3: ability to interrupt render
-    ✕ check4: proper update after interrupt (5152ms)
+    ✓ check3: ability to interrupt render (1ms)
+    ✓ check4: proper update after interrupt (1239ms)
   react-hooks-global-state
-    ✓ check1: updated properly (8967ms)
+    ✓ check1: updated properly (8592ms)
     ✓ check2: no tearing during update (1ms)
     ✓ check3: ability to interrupt render
-    ✓ check4: proper update after interrupt (1205ms)
+    ✓ check4: proper update after interrupt (2207ms)
   use-context-selector
-    ✓ check1: updated properly (8604ms)
+    ✓ check1: updated properly (8601ms)
     ✓ check2: no tearing during update (1ms)
     ✓ check3: ability to interrupt render
-    ✓ check4: proper update after interrupt (2246ms)
+    ✓ check4: proper update after interrupt (1100ms)
   mobx-react-lite
-    ✕ check1: updated properly (11839ms)
-    ✕ check2: no tearing during update (2ms)
+    ✓ check1: updated properly (2855ms)
+    ✕ check2: no tearing during update (1ms)
     ✓ check3: ability to interrupt render
-    ✕ check4: proper update after interrupt (5067ms)
+    ✓ check4: proper update after interrupt (1156ms)
   use-subscription
-    ✓ check1: updated properly (8458ms)
+    ✓ check1: updated properly (8222ms)
     ✓ check2: no tearing during update (1ms)
     ✓ check3: ability to interrupt render
-    ✕ check4: proper update after interrupt (5054ms)
+    ✓ check4: proper update after interrupt (2270ms)
 ```
 
 </details>
@@ -133,7 +133,7 @@ in your browser, and click the button very quickly. (check the console log)
     <td>Pass</td>
     <td>Fail</td>
     <td>Pass</td>
-    <td>Fail</td>
+    <td>Pass</td>
   </tr>
 
   <tr>
@@ -173,23 +173,23 @@ in your browser, and click the button very quickly. (check the console log)
     <td>Pass</td>
     <td>Fail</td>
     <td>Pass</td>
-    <td>Fail</td>
+    <td>Pass</td>
   </tr>
 
   </tr>
     <th>react-sweet-state</th>
     <td>Pass</td>
     <td>Fail</td>
-    <td>Fail? (just a little bit slow)</td>
-    <td>Fail</td>
+    <td>Fair (just a little bit slow)</td>
+    <td>Pass</td>
   </tr>
 
   </tr>
     <th>storeon</th>
     <td>Pass</td>
     <td>Fail</td>
     <td>Pass</td>
-    <td>Fail</td>
+    <td>Pass</td>
   </tr>
 
   </tr>
@@ -210,18 +210,18 @@ in your browser, and click the button very quickly. (check the console log)
 
   </tr>
     <th>mobx-react-lite</th>
-    <td>Fail</td>
-    <td>Fail</td>
     <td>Pass</td>
     <td>Fail</td>
+    <td>Pass</td>
+    <td>Pass</td>
   </tr>
 
   </tr>
     <th>use-subscription (w/ redux)</th>
     <td>Pass</td>
     <td>Pass</td>
     <td>Pass</td>
-    <td>Fail</td>
+    <td>Pass</td>
   </tr>
 </table>
 

src/common.js

@@ -45,3 +45,14 @@ export const useCheckTearing = () => {
     }
   });
 };
+
+// naive shallowEqual for React.memo
+// a hack until the issue is resolved
+// https://github.com/facebook/react/issues/17314
+// https://github.com/facebook/react/issues/17318
+export const shallowEqual = (prevProps, nextProps) => {
+  const prevKeys = Object.keys(prevProps);
+  const nextKeys = Object.keys(nextProps);
+  return prevKeys.every(key => prevProps[key] === nextProps[key])
+    && nextKeys.every(key => prevProps[key] === nextProps[key]);
+};

src/constate/index.js

@@ -8,6 +8,7 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const useValue = () => React.useReducer(reducer, initialState);
@@ -18,7 +19,7 @@ const Counter = React.memo(() => {
   const { count } = state;
   syncBlock();
   return <div className="count">{count}</div>;
-});
+}, shallowEqual);
 
 const Main = () => {
   const [state, dispatch] = useValueContext();

src/mobx-react-lite/index.js

@@ -7,6 +7,7 @@ import {
   initialState,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const Ctx = createContext();
@@ -18,7 +19,7 @@ const Counter = React.memo(() => {
     syncBlock();
     return <div className="count">{count}</div>;
   });
-});
+}, shallowEqual);
 
 const Main = () => {
   const store = useContext(Ctx);

src/react-hooks-global-state/index.js

@@ -8,6 +8,7 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const { GlobalStateProvider, dispatch, useGlobalState } = createStore(reducer, initialState);
@@ -16,7 +17,7 @@ const Counter = React.memo(() => {
   const [count] = useGlobalState('count');
   syncBlock();
   return <div className="count">{count}</div>;
-});
+}, shallowEqual);
 
 const Main = () => {
   const [count] = useGlobalState('count');

src/react-redux/index.js

@@ -8,6 +8,7 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const store = createStore(reducer);
@@ -16,7 +17,7 @@ const Counter = React.memo(() => {
   const count = useSelector(state => state.count);
   syncBlock();
   return <div className="count">{count}</div>;
-});
+}, shallowEqual);
 
 const Main = () => {
   const dispatch = useDispatch();

src/react-sweet-state/index.js

@@ -8,6 +8,7 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const Store = createStore({
@@ -26,7 +27,7 @@ const Counter = React.memo(() => {
   const { count } = state;
   syncBlock();
   return <div className="count">{count}</div>;
-});
+}, shallowEqual);
 
 const Main = () => {
   const [state, actions] = useCounter();

src/react-tracked/index.js

@@ -8,6 +8,7 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const useValue = () => React.useReducer(reducer, initialState);
@@ -18,7 +19,7 @@ const Counter = React.memo(() => {
   const count = useSelector(state => state.count);
   syncBlock();
   return <div className="count">{count}</div>;
-});
+}, shallowEqual);
 
 const Main = () => {
   const dispatch = useDispatch();

src/reactive-react-redux/index.js

@@ -8,6 +8,7 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const store = createStore(reducer);
@@ -16,7 +17,7 @@ const Counter = React.memo(() => {
   const count = useSelector(state => state.count);
   syncBlock();
   return <div className="count">{count}</div>;
-});
+}, shallowEqual);
 
 const Main = () => {
   const dispatch = useDispatch();

src/storeon/index.js

@@ -10,6 +10,7 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const counter = (store) => {
@@ -23,7 +24,7 @@ const Counter = React.memo(() => {
   const { count } = useStoreon('count');
   syncBlock();
   return <div className="count">{count}</div>;
-});
+}, shallowEqual);
 
 const Main = () => {
   const { count, dispatch } = useStoreon('count');

src/unstated-next/index.js

@@ -8,6 +8,7 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const useValue = () => React.useReducer(reducer, initialState);
@@ -18,7 +19,7 @@ const Counter = React.memo(() => {
   const { count } = state;
   syncBlock();
   return <div className="count">{count}</div>;
-});
+}, shallowEqual);
 
 const Main = () => {
   const [state, dispatch] = C.useContainer();

src/use-context-selector/index.js

@@ -8,6 +8,7 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const context = createContext(null);
@@ -25,7 +26,7 @@ const Counter = React.memo(() => {
   const count = useContextSelector(context, v => v[0].count);
   syncBlock();
   return <div className="count">{count}</div>;
-});
+}, shallowEqual);
 
 const Main = () => {
   const dispatch = useContextSelector(context, v => v[1]);

src/use-subscription/index.js

@@ -8,6 +8,7 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const store = createStore(reducer);
@@ -21,7 +22,7 @@ const Counter = React.memo(() => {
   }), []));
   syncBlock();
   return <div className="count">{count}</div>;
-});
+}, shallowEqual);
 
 const Main = () => {
   const count = useSubscription(React.useMemo(() => ({

src/zustand/index.js

@@ -8,6 +8,7 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const [useStore] = create(set => ({
@@ -19,7 +20,7 @@ const Counter = React.memo(() => {
   const count = useStore(state => state.count);
   syncBlock();
   return <div className="count">{count}</div>;
-});
+}, shallowEqual);
 
 const Main = () => {
   const count = useStore(state => state.count);