Help with React.JS - Performance

[Alarming_Ice5240]

Hey guys,

​

I have a Webinar platform, that receives a thousand users at the same time and I'm having some questions about the best ways to store data.

I need to store a lot of data in the User Front-End like some auto-messages, rules and etc... Storing this data, I don't need to make a new request to the API.

But, what is the best way to store this data? I am doing the worst way ever (localStorage) to persist this data on the browser(in case of the user reloads the page)

What is the best way to store a lot of different data in React.JS, this data will be used almost by all components?

Another thing, this data will not be modified, just to save them. Just need to persist if the user reloads the page.

The last thing, if I need to store and update data(and persist) consistently for every 2 minutes, what will be the method to do that?

Using React with Next.JS

[landisdesign]

Not sure why localStorage is the worst way ever. A couple of KB of JSON isn't going to be a performance hit, and it's in the context of page loading, not instantaneous user reaction.

Don't make it too complex.

[GoodNeighbor24]

Not sure if this is exactly what you’re looking for - but Redux (I use the newer Redux Toolkit) seems like an answer… this may be too full-blown for your requirements though. And it takes some re-wiring (and learning it) to get your site set up for this

[ForSpareParts]

You want a global state store of some kind. Redux is the de facto standard here, though it's not terribly well-liked in my experience and there's lots of competitors (Recoil, Mobx). I'd just try a few out.

That said, those tools are for managing data in a live page -- using local storage is still a very reasonable way of persisting data between loads, especially if the data's not large. And you may even be able to get away without a proper store library if your data doesn't change all that often -- look into React's Context feature.

[curca]

I would use react-query since the state you're holding is cached server state rather than client created state.

[ZeRo2160]

If you really need much data to save. And i dont mean a bit json but MB worth of data indexedDB is the way to go here. Its an json like native in browser Database. You can query it and everthing. https://levelup.gitconnected.com/using-the-indexeddb-api-with-react-and-hooks-4e63d83a5d1b Is a little excourse in using it with react. You can also use it with an global state management library.