Is it ok to use localStorage instead of Redux or Context API?

Question

I've been working with React for a little while, and after some time i started to ask myself, why not store every piece of data that my components need to share in localstorage instead of using Redux. Redux need so much boilerplate while localstorage is so simple. You can say that you cant storage object in localstorage but you can JSON.stringfy them, and on recovery just parse them back. So problaby there's something that i cant see properly about that, cause Redux is largely used and localstorage is normally used just to save data you dont wish to loss on refresh and things like that.

Answer 1

This question was on my head when I started developing react apps. There are many reasons than below to use redux over localStorage. but at least

1. Using Redux alongside react-redux is not only for store data. don't forget that changing in a state will reRender All components that listen to that state. and that is really what react-redux does.
2. stringify/parse from localStorage will make your app (on high-scale) slower and also will not sync all components while changing state.

Personal Recommendation After more than 4 years of developing React Apps, use REDUX with easy API like redux-toolkit or rematch

Answer 2

Redux and localStorage have different use cases actually. Redux you'll use to manage your application state across multiple components.

Local Storage you'll use to persist properties in the browser for later usage. The problem is that any change on your localStorage won't reflect on your application. You'll have to do it manually.

Answer 3

The purpose of react-redux is to allow other components to connect to state and then react on changes. You are loosing the whole scope of using react-redux/context api.

Answer 4

The answer is in your question, yes local storage is only used for storing data in the browser while redux and context api solve some different problem. It separates your data layer from your view to easily manage your data state. If the app is not really big then you should consider going with Context API. You can read this article for more info. Note, stringifying and parsing itself is a pretty heavy operations for larger datasets.

Answer 5

It's probably OK to use localstorage instead of Redux. It's possible to have changes in localstorage have immediate effect on subscribed react components.

The people at marmelab who built react-admin transitioned from using redux to what they call The Store.

React-admin contains a global, synchronous, persistent store for storing user preferences. Think of the Store as a key-value database that persists between page loads.

The store uses the browser local storage (or a memory storage when localStorage isn’t available). The store is emptied when the user logs out.

When using react-admin changes in localstorage have immediate effect on subscribed react components. Checkout the readme and try the demo. Do some fiddling with data in localstorage manually, and see how react components rerender. I was amazed when I saw that for the first time.

Answer 6

Why use Redux instead of localStorage:

1. Disk space: You will probably not be deleting data from local storage every time the user quits your website. (you could with onbeforeonunload event enter link description here but it doesn't look like a good pracitce).

2. Security: If you are saving user's data, you would have to be careful on not mixing users data saved on localStorage.

Why not use Redux instead of localStorage:

1. "update the state": The truth is that you can listen to changes on localStorage and then change the state. So, I think, this is not a good reason. For example:

   window.addEventListener('storage', (event) => { setState("changed")});

2. Simplicity: as Zhang Buzz, redux can be a pain.

Each case is different and you'll needs to weight the pros and cons to make a good decision.

Answer 7

Yes! For smaller applications it is entirely sufficient. As others have pointed out, you may notice a performance drawback in larger applications due to expensive JSON parsing.

However, remember what the whole point of 'state' is. When state changes, your app is supposed to re-render the necessary parts to reflect this. You don't get this out of the box with localStorage. I suggest using a library such as use-hooks: https://usehooks-ts.com/

Answer 8

I think it's ok. It depends on your requirement. In our situation, we need to split a big project into several small projects, whether use Redux or Mobx both cause problem very difficult, so we totally remove Redux and Mobx, just use LocalStorage to save all states. We know it will be slow and cannot rerender when state changes, but we want to accept it, and even add a Refresh button on some page if need to get state from local storage. So the answer is: it's ok to totally remove Redux, just see if you want to accept it or not.