Redux: Clearing large lists from store when not used

Question

Is it best practice to clear out large arrays of objects from the store when a user is not using them?

for example:

A "books list" container component loads a large array of book objects into the store under a key { books }.

When a user navigates away to another container component, lets say "movies list" that also loads a large array, this time of movies. Is it best to clear out the list of books to save memory / performance? as the user may never visit the "books list" again..?

• Considerations would be mobile & older desktops?

Answer 1

Unless keeping it in memory turns out to cause problems during testing, I would not remove the data from the state .

Even with a few thousand entries in the list, the memory usage should not cause you any issues, and the performance hit will be minimal if you don't eg copy the array during each state change.

The performance hit/delay that is caused by a constant reload of the data from your backend will have a more negative impact on the user experience. You should also consider bandwidth usage, especially for mobile users.

Once you actually face performance issues you should think about where to optimize, however clearing the state on every navigation seems like premature optimization in my eyes and the additional complexity may actually hurt you instead in the long term.