Question: How to do memory management in react-redux?


How to do memory management in react-redux?

Answers 3
Added at 2016-12-30 05:12

As we know that provider will make available all the data stored in store to our application, but I am wondering about the memory because in create store we are saving all the data of our application. Now If my application has multiple pages with huge data then all the data will be in store, in this case there is a risk of memory leakage. So how can we clear and store data in react-redux dynamically to overcome this memory leakage.

I am saving data in create store as:

  1. First I have a reducer with all data.

    export const makeRootReducer = (asyncReducers) => {
      return combineReducers({
        location: locationReducer,
        user: home,
  2. In Create store I am passing this reducer.

    const store = createStore(

Please suggest me how can I avoid the memory leakage?

Answers to

How to do memory management in react-redux?

nr: #1 dodano: 2016-12-30 09:12

The store is here to only hold the data that you will render and present to the user or some user inputs. You dont have to store all of your data in the store and you should not do it.

if your data is huge , you have to split it and load it by dispatching some actions which will use some third party modules like redux-thunk or saga to handle the asynchronous calls Examples:(http requests or sockets for streams).

Think of it like you need to put in the store only the data that the user needs to navigate and what he wants to see and nothing more.

hope it helps

nr: #2 dodano: 2016-12-30 12:12
  1. Normalize your data
  2. Consider your store as a cache of what is on the server. So what you want to do is cache replacement. Select the correct strategy per store slice. E.g: LRU, LFU
  3. Carefully select your store data structures based on the cache replacement policy you implement per store slice again.

If you don't plan to implement support for offline viewing etc., you might consider not bothering with any of it and throwing away the data when user leaves a page; which is oddly yet another cache replacement strategy :)

nr: #3 dodano: 2017-01-04 00:01

There are many way you can optimize to avoid memory leak.

  • update data in store, what you need. do ot push all the application data at one time.
  • normalize your store(user normalizer npm)
  • use reselect to cache.
  • do not call render unnecessary in component or its child (shouldComponentUpdate lifecyle)
Source Show
◀ Wstecz