redux-persist: PersistGate causing slowness

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

About this issue

  • Original URL
  • State: open
  • Created 6 years ago
  • Reactions: 6
  • Comments: 21

Most upvoted comments

@adhenrique how did you resolved this issue?

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

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 …

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?

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)

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

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

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

This works for me! thanks @GitPhillip