update packages; remove areEqual workaround for React.memo

Author: dai-shi

README.md

@@ -51,16 +51,16 @@
     "mobx-react-lite": "^2.0.0-alpha.4",
     "react": "experimental",
     "react-dom": "experimental",
-    "react-hooks-global-state": "^1.0.0-alpha.2",
-    "react-redux": "^7.1.3",
+    "react-hooks-global-state": "^1.0.0",
+    "react-redux": "^7.2.0",
     "react-sweet-state": "^2.0.0",
     "react-tracked": "^1.0.6",
     "reactive-react-redux": "^4.5.0",
     "redux": "^4.0.5",
     "storeon": "^0.9.8",
     "use-context-selector": "^1.0.1",
     "use-subscription": "^1.3.0",
-    "zustand": "^2.2.2"
+    "zustand": "^2.2.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -74,7 +74,7 @@
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^2.3.0",
+    "eslint-plugin-react-hooks": "^2.4.0",
     "html-webpack-plugin": "^3.2.0",
     "http-server": "^0.12.1",
     "jest": "^25.1.0",

package.json

@@ -67,14 +67,3 @@ 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/common.js

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

src/constate/index.js

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

src/mobx-react-lite/index.js

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

src/mobx-use-sub/index.js

@@ -8,7 +8,6 @@ import {
   reducer,
   ids,
   useCheckTearing,
-  shallowEqual,
   initialState,
 } from '../common';
 
@@ -81,7 +80,7 @@ const Counter = React.memo(() => {
   const { loading, error, data } = useQuery(COUNT_QUERY, { fetchPolicy: 'cache-only' });
   syncBlock();
   return <div className="count">{(!loading && !error && data) ? data.count : 0}</div>;
-}, shallowEqual);
+});
 
 const Main = () => {
   const [increment] = useMutation(INCREMENT_MUTATION);

src/react-apollo/index.js

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

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

@@ -8,7 +8,6 @@ import {
   reducer,
   ids,
   useCheckTearing,
-  shallowEqual,
 } from '../common';
 
 const { dispatch, useGlobalStateProvider, useGlobalState } = createStore(reducer, initialState);
@@ -17,7 +16,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-hooks-global-state-2/index.js

@@ -8,7 +8,6 @@ import {
   reducer,
   ids,
   useCheckTearing,
-  shallowEqual,
 } from '../common';
 
 const store = createStore(reducer);
@@ -17,7 +16,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-redux/index.js

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

src/react-state/index.js

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

src/react-sweet-state/index.js

@@ -8,7 +8,6 @@ import {
   reducer,
   ids,
   useCheckTearing,
-  shallowEqual,
 } from '../common';
 
 const useValue = () => React.useReducer(reducer, initialState);
@@ -19,7 +18,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-tracked/index.js

@@ -8,7 +8,6 @@ import {
   reducer,
   ids,
   useCheckTearing,
-  shallowEqual,
 } from '../common';
 
 const store = createStore(reducer);
@@ -17,7 +16,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,7 +8,6 @@ import {
   reducer,
   ids,
   useCheckTearing,
-  shallowEqual,
 } from '../common';
 
 const store = createStore(reducer);
@@ -17,7 +16,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/salvoravida-react-redux/index.js

@@ -7,7 +7,6 @@ import {
   useRegisterIncrementDispatcher,
   ids,
   useCheckTearing,
-  shallowEqual,
   initialState,
 } from '../common';
 
@@ -33,7 +32,7 @@ const Counter = React.memo(() => {
   const count = useSimplux(counter.value);
   syncBlock();
   return <div className="count">{count}</div>;
-}, shallowEqual);
+});
 
 const Main = () => {
   const count = useSimplux(counter.value);

src/simplux/index.js

@@ -10,7 +10,6 @@ import {
   reducer,
   ids,
   useCheckTearing,
-  shallowEqual,
 } from '../common';
 
 const counter = (store) => {
@@ -24,7 +23,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/storeon/index.js

@@ -8,7 +8,6 @@ import {
   reducer,
   ids,
   useCheckTearing,
-  shallowEqual,
 } from '../common';
 
 const context = createContext(null);
@@ -26,7 +25,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-context-selector/index.js

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

src/use-subscription/index.js

@@ -8,7 +8,6 @@ import {
   reducer,
   ids,
   useCheckTearing,
-  shallowEqual,
 } from '../common';
 
 const [useStore] = create((set) => ({
@@ -20,7 +19,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);