PersistGate causing slowness

[adhenrique]

In development environment, I noticed that with each reload that the app was slow. So I did some testing, and by removing PersistGate, the app loads easily, and without any slowness.

cfgStore:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import reducers from './combineStore';

const persistConfig = {
    key: 'root',
    storage,
};

const cfgStore = () => {
    const middlewares = [thunk];
    const enhancer = applyMiddleware(...middlewares);
    const persistedReducer = persistReducer(persistConfig, reducers);

    // create store
    return createStore(persistedReducer, enhancer);
};

export const persistor = persistStore(cfgStore());

export default cfgStore;

index.js

// ...

export default class App extends Component {
    componentDidMount(){
        SplashScreen.hide()
    }

    render() {
    // ...
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <StatusBar
                        backgroundColor={mainStyle.principalBackColor}
                        barStyle="dark-content"
                    />
                    <Loader loading={loader}/>
                    <RouterWithRedux>
                        <Scene key='root'>
                            <Scene
                                component={List}
                                // initial={isLoggedIn && token}
                                initial={true}
                                hideNavBar={true}
                                key='List'
                                title='List'
                            />
                        </Scene>
                    </RouterWithRedux>
                </PersistGate>
            </Provider>
        )
    }
}

My stack: react-native 0.54.4 react-native-router-flux ^4.0.0-beta.28 react-redux ^5.0.7 redux-persist ^5.9.1 redux-thunk ^2.2.0

[workostap]

I faced the same issue

[waliurjs]

@adhenrique how did you resolved this issue?

[waclock]

Having the same problem. Could anyone pinpoint to a solution?

[el-lsan]

Any hint here ?

[chaiyilin]

why this one is closed? facing same issue

[sreehari95]

Having the same problem. Any solutions?

[adhenrique]

It's been 1 year since I posted this problem here. I will try to run it again, and I will comment again here.

if I'm not mistaken, it was something related to configuration ...

[nishanBende]

@adhenrique did you find something? I created this feature request, I don't know if it's possible, but I'll surely look it this weekend. https://github.com/rt2zz/redux-persist/issues/1094

[kompot]

version 6 has timeout option in config and you can reduce 5 seconds to whatever you want (risking you state not being properly hydrated I guess)

[anc95]

version 6 has timeout option in config and you can reduce 5 seconds to whatever you want (risking you state not being properly hydrated I guess)

what's the meaning of timeout?

[GitPhillip]

Try this: const persistConfig = { timeout: 2000, //Set the timeout function to 2 seconds key: 'root', storage, };

[leonarpv]

Try this: const persistConfig = { timeout: 2000, //Set the timeout function to 2 seconds key: 'root', storage, };

This works for me! thanks @GitPhillip

[liquidvisual]

Is the timeout option documented anywhere? I can't find it mentioned anywhere in any of the official docs. What does it actually do?

[GitPhillip]

Is the timeout option documented anywhere? I can't find it mentioned anywhere in any of the official docs. What does it actually do?

Remember PersistGate delays the rendering of your app's UI until your persisted state has been retrieved and saved to redux.

It can happen that your UI loads before your state is ready and that causes problems. The timeout option allows you to set the delay time that is otherwise 5 seconds at default (if I'm not mistaken)

[baltagih2]

Is there any solution other than guessing a number that could work? Something like "as soon as state is ready, render UI" instead of waiting for a timeout?

[GitPhillip]

Is there any solution other than guessing a number that could work? Something like "as soon as state is ready, render UI" instead of waiting for a timeout?

persistStore(store, [config, callback])

arguments -store (redux store): The store to be persisted. -config object (typically null)

If you want to avoid that the persistence starts immediately after calling persistStore, set the option manualPersist. Example: { manualPersist: true } Persistence can then be started at any point with persistor.persist(). You usually want to do this if your storage is not ready when the persistStore call is made. callback function will be called after rehydration is finished. returns persistor object

[WinterDevelopers]

Youp the timeout fixed it

[bedukumar]

Try this: const persistConfig = { timeout: 2000, //Set the timeout function to 2 seconds key: 'root', storage, };

thanks it worked for me and i kept it to 100ms

[MehdiRazaNaqvi]

Try this: const persistConfig = { timeout: 2000, //Set the timeout function to 2 seconds key: 'root', storage, };

Yeah It solved. But not for the routes like '/resetPassword?code=...' I am Using Nextjs with Strapi server so I need to navigate to /resetPassword route from my email which also contains code in route query. Is there anay hack to do so?

[BaalGroup]

Is there any solution other than guessing a number that could work? Something like "as soon as state is ready, render UI" instead of waiting for a timeout?

persistStore(store, [config, callback])

arguments -store (redux store): The store to be persisted. -config object (typically null)

If you want to avoid that the persistence starts immediately after calling persistStore, set the option manualPersist. Example: { manualPersist: true } Persistence can then be started at any point with persistor.persist(). You usually want to do this if your storage is not ready when the persistStore call is made. callback function will be called after rehydration is finished. returns persistor object

Man this solved my problem in a sensable way. without changing timeout which makes no sense i used manualPersist option and called persistor.persist() inside a useEffect callback which i presume runs after UI has loaded and in this way the delay has totally gone.

[sheldonNico10]

Is there any solution other than guessing a number that could work? Something like "as soon as state is ready, render UI" instead of waiting for a timeout?

persistStore(store, [config, callback])

arguments -store (redux store): The store to be persisted. -config object (typically null)

If you want to avoid that the persistence starts immediately after calling persistStore, set the option manualPersist. Example: { manualPersist: true } Persistence can then be started at any point with persistor.persist(). You usually want to do this if your storage is not ready when the persistStore call is made. callback function will be called after rehydration is finished. returns persistor object

can you point to any documentation on this.? I see nothing online about manually persisting the store.