Fix async hydration problems

packages/wrapper/src/index.tsx

@@ -162,25 +162,13 @@ export const createWrapper = <S extends Store>(makeStore: MakeStore<S>, config:
     };
 
     const useHybridHydrate = (store: S, state: any) => {
-        const firstRender = useRef<boolean>(true);
+        const lastState = useRef<any>();
 
-        useEffect(() => {
-            firstRender.current = false;
-        }, []);
-
-        useMemo(() => {
-            // synchronous for server or first time render
-            if (getIsServer() || firstRender.current) {
-                hydrate(store, state);
-            }
-        }, [store, state]);
-
-        useEffect(() => {
-            // asynchronous for client subsequent navigation
-            if (!getIsServer()) {
-                hydrate(store, state);
-            }
-        }, [store, state]);
+        // synchronous for server and client render
+        if (lastState.current !== state) {
+            lastState.current = state;
+            hydrate(store, state);
+        }
     };
 
     const useWrappedStore = ({initialState, initialProps, ...props}: any, displayName = 'useWrappedStore'): {store: S; props: any} => {

packages/wrapper/tests/client.spec.tsx

@@ -3,9 +3,9 @@
  **/
 
 import * as React from 'react';
-import {useDispatch} from 'react-redux';
-import {create, act} from 'react-test-renderer';
-import {DummyComponent, wrapper, child, makeStore} from './testlib';
+import {useDispatch, useSelector} from 'react-redux';
+import {create, act, ReactTestRenderer} from 'react-test-renderer';
+import {DummyComponent, wrapper, child, makeStore, State} from './testlib';
 import {createWrapper} from '../src';
 import {Store} from 'redux';
 
@@ -63,4 +63,28 @@ describe('client integration', () => {
         // expected when invoked above
         await w.withRedux(Page)?.getInitialProps({} as any);
     });
+
+    test('client side action override state from server', () => {
+        const stateFromClient = 'state from client';
+        const w = createWrapper(makeStore);
+
+        const Page: React.ComponentType<any> = () => {
+            const dispatch = useDispatch();
+            const reduxStatus = useSelector<State, string | undefined>(state => state.reduxStatus);
+            React.useEffect(() => {
+                // modifies the state,
+                dispatch({type: 'FOO', payload: stateFromClient});
+            }, [dispatch]);
+
+            return <>{reduxStatus}</>;
+        };
+
+        const Wrapped: any = w.withRedux(Page);
+
+        let renderer: ReactTestRenderer;
+        act(() => {
+            renderer = create(<Wrapped initialState={{reduxStatus: 'state from server'}} />);
+        });
+        expect(renderer!.toJSON()).toEqual(stateFromClient);
+    });
 });