Revert Component detection

kirill-konshin · Nov 1, 2022 · f1d83bd · f1d83bd
1 parent 2f10b94
commit f1d83bd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -142,7 +142,7 @@ import {AppProps} from 'next/app';
 import {wrapper} from '../components/store';
 
 const MyApp: FC<AppProps> = ({Component, ...rest}) => {
-    const {store, props} = wrapper.useWrappedStore({Component, ...rest});
+    const {store, props} = wrapper.useWrappedStore(rest);
     return (
         <Provider store={store}>
             <Component {...props.pageProps} />

diff --git a/packages/demo-redux-toolkit/pages/_app.tsx b/packages/demo-redux-toolkit/pages/_app.tsx
@@ -4,7 +4,7 @@ import {AppProps} from 'next/app';
 import {wrapper} from '../store';
 
 const MyApp: FC<AppProps> = ({Component, ...rest}) => {
-    const {store, props} = wrapper.useWrappedStore({Component, ...rest});
+    const {store, props} = wrapper.useWrappedStore(rest);
     return (
         <Provider store={store}>
             <Component {...props.pageProps} />

diff --git a/packages/wrapper/src/index.tsx b/packages/wrapper/src/index.tsx
@@ -1,6 +1,6 @@
 import App, {AppContext, AppInitialProps} from 'next/app';
 import { useRouter } from 'next/router';
-import React, {useEffect, useMemo, useRef} from 'react';
+import React, {useLayoutEffect, useMemo, useRef} from 'react';
 import {Provider} from 'react-redux';
 import {Store} from 'redux';
 import {
@@ -162,16 +162,14 @@ export const createWrapper = <S extends Store>(makeStore: MakeStore<S>, config:
         } as any);
     };
 
-    const useHybridHydrate = (store: S, state: any, Component: any) => {
+    const useHybridHydrate = (store: S, state: any) => {
         const prevRoute = useRef<string>('');
-        const prevComponent = useRef<string>('');
 
         const { asPath } = useRouter();
 
-        const newPage = prevRoute.current !== asPath || prevComponent !== Component;
+        const newPage = prevRoute.current !== asPath;
 
         prevRoute.current = asPath;
-        prevComponent.current = Component;
 
         // synchronous for server or first time render
         useMemo(() => {
@@ -181,15 +179,15 @@ export const createWrapper = <S extends Store>(makeStore: MakeStore<S>, config:
         }, [store, state, newPage]);
 
         // asynchronous for client subsequent navigation
-        useEffect(() => {
+        useLayoutEffect(() => {
             // FIXME Here we assume that if path has not changed, the component used to render the path has not changed either, so we can hydrate asynchronously
             if (!newPage) {
                 hydrate(store, state);
             }
         }, [store, state, newPage]);
     };
 
-    const useWrappedStore = ({Component, initialState, initialProps, ...props}: any, displayName = 'useWrappedStore'): {store: S; props: any} => {
+    const useWrappedStore = ({initialState, initialProps, ...props}: any, displayName = 'useWrappedStore'): {store: S; props: any} => {
         // this happens when App has page with getServerSideProps/getStaticProps, initialState will be dumped twice:
         // one incomplete and one complete
         const initialStateFromGSPorGSSR = props?.pageProps?.initialState;
@@ -203,8 +201,8 @@ export const createWrapper = <S extends Store>(makeStore: MakeStore<S>, config:
 
         const store = useMemo<S>(() => initStore<S>({makeStore}), []);
 
-        useHybridHydrate(store, initialState, Component);
-        useHybridHydrate(store, initialStateFromGSPorGSSR, Component);
+        useHybridHydrate(store, initialState);
+        useHybridHydrate(store, initialStateFromGSPorGSSR);
 
         let resultProps: any = props;
 
@@ -229,7 +227,7 @@ export const createWrapper = <S extends Store>(makeStore: MakeStore<S>, config:
             delete resultProps.pageProps.initialProps;
         }
 
-        return {store, props: {...initialProps, ...resultProps, Component}};
+        return {store, props: {...initialProps, ...resultProps}};
     };
 
     const withRedux = (Component: NextComponentType | App | any) => {
@@ -239,7 +237,7 @@ export const createWrapper = <S extends Store>(makeStore: MakeStore<S>, config:
 
         //TODO Check if pages/_app was wrapped so there's no need to wrap a page itself
         const WrappedComponent = (props: any) => {
-            const {store, props: combinedProps} = useWrappedStore({Component, ...props}, WrappedComponent.displayName); // Component goes first for _app which has props.component
+            const {store, props: combinedProps} = useWrappedStore(props, WrappedComponent.displayName); // Component goes first for _app which has props.component
 
             return (
                 <Provider store={store}>