useLayoutEffect to avoid unnecessary renders

Author: goloveychuk

src/__tests__/index-test.tsx

@@ -16,7 +16,7 @@ interface IState {
 }
 
 describe('redux-react-hook', () => {
-  let subscriberCallback: (() => void) | null;
+  let subscriberCallbacks: Array<() => void> = [];
   let state: IState;
   let cancelSubscription: () => void;
   let store: Store<IState, IAction>;
@@ -26,19 +26,23 @@ describe('redux-react-hook', () => {
     dispatch: jest.fn(action => action),
     getState: () => state,
     subscribe: jest.fn((l: () => void) => {
-      subscriberCallback = l;
+      subscriberCallbacks.push(l);
       return cancelSubscription;
     }),
     // tslint:disable-next-line:no-empty
     replaceReducer() {},
   });
 
-  function updateStore(newState: IState) {
+  function updateStoreWithoutAct(newState: IState) {
     state = newState;
+    for (const sub of subscriberCallbacks) {
+      sub();
+    }
+  }
+
+  function updateStore(newState: IState) {
     act(() => {
-      if (subscriberCallback) {
-        subscriberCallback();
-      }
+      updateStoreWithoutAct(newState);
     });
   }
 
@@ -53,7 +57,7 @@ describe('redux-react-hook', () => {
 
   afterEach(() => {
     document.body.removeChild(reactRoot);
-    subscriberCallback = null;
+    subscriberCallbacks = [];
   });
 
   function render(element: React.ReactElement<any>) {
@@ -265,6 +269,25 @@ describe('redux-react-hook', () => {
       expect(renderCount).toBe(2);
     });
 
+    it('renders once if have multiple useMappedState', () => {
+      let renderCount = 0;
+      const Component = ({prop}: {prop: any}) => {
+        const mapState1 = React.useCallback((s: IState) => s.bar, [prop]);
+        const mapState2 = React.useCallback((s: IState) => s.foo, [prop]);
+        useMappedState(mapState1);
+        useMappedState(mapState2);
+        renderCount++;
+        return null;
+      };
+
+      render(<Component prop={1} />);
+
+      updateStoreWithoutAct({bar: 11, foo: '11'});
+      updateStoreWithoutAct({bar: 12, foo: '12'});
+      act(() => {});
+      expect(renderCount).toBe(3);
+    });
+
     it('throws if provider is missing', () => {
       const Component = () => {
         const mapState = React.useCallback((s: IState) => s, []);

src/create.ts

@@ -3,14 +3,22 @@
 import {
   createContext,
   useContext,
-  useEffect,
   useMemo,
   useReducer,
   useRef,
+  useLayoutEffect,
+  useEffect,
 } from 'react';
 import {Action, Dispatch, Store} from 'redux';
 import shallowEqual from './shallowEqual';
 
+// React currently throws a warning when using useLayoutEffect on the server.
+// To get around it, we can conditionally useEffect on the server (no-op) and
+// useLayoutEffect in the browser.
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 class MissingProviderError extends Error {
   constructor() {
     super(
@@ -88,12 +96,23 @@ export function create<
 
     const memoizedMapStateRef = useRef(memoizedMapState);
 
-    useEffect(() => {
+
+    // We use useLayoutEffect to render once if we have multiple useMappedState. 
+    // We need to update lastStateRef synchronously after rendering component,
+    // With useEffect we would have:
+    // 1) dispatch action
+    // 2) call subscription cb in useMappedState1, call forceUpdate
+    // 3) rerender component
+    // 4) call useMappedState1 and useMappedState2 code
+    // 5) calc new derivedState in useMappedState2, schedule updating lastStateRef, return new state, render component
+    // 6) call subscription cb in useMappedState2, check if lastStateRef !== newDerivedState, call forceUpdate, rerender.
+    // 7) update lastStateRef - it's too late, we already made one unnecessary render
+    useIsomorphicLayoutEffect(() => {
       lastStateRef.current = derivedState;
       memoizedMapStateRef.current = memoizedMapState;
     });
 
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       let didUnsubscribe = false;
 
       // Run the mapState callback and if the result has changed, make the