CODEWITHSUNDEEP
reactjsredux
Ehsan Korhani
Ehsan Korhani

Reputation: 75

React: Frequently updating a shared state

I know that redux can hold up a central store (source of truth) for the entire app. However, any change in any property requires you to clone the entire state, reflect the change and return the new state.

And I think that is too much if you are updating your app state frequently.

My problem is that I want to increment a counter component periodically in different pages. All should be in sync, therefore, they must read from the same source for their data when rendered. The seed data will be set at the app initialization.

The source can be a Redux store. But this will create the possible issue I mentioned at the beginning.

Is there any other approach to this problem?

Upvotes: 1

Views: 966

Answers (2)

Tyler
Tyler

Reputation: 2390

If you are already using Redux in your app, I would continue to use it until you see an impact from frequently updating the store. One of the benefits of Redux is that even though you are returning a new object on every state transition, you can avoid unnecessary re-renders if your components are connected to the store properly. The default option for the connect function is to treat the connected component as a "pure" component, meaning it won't re-render unless the specific fields selected in mapStateToProps change rather than rendering on any state update. That being said, there is still overhead in cloning the state object and calling all of the mapStateToProps functions. Without benchmarking the specific use case and frequency of updating the store it's hard to say if that overhead would be worth maintaining application state in another location.

Another option is the newly redesigned Context API. It is a great way to maintain shared state without passing it all up and down your component tree. I would highly recommend reading the documentation and trying it out. Just be aware of the maintenance costs of maintaining state in multiple places and be sure to structure your app accordingly.

Upvotes: 1

Lpaydat
Lpaydat

Reputation: 436

You can use reselect library on your store. Below quote is from this article.

Reselect is a library for building memoized selectors. We define selectors as the functions that retrieve snippets of the Redux state for our React components. Using memoization, we can prevent unnecessary rerenders and recalculations of derived data which in turn will speed up our application.

This is an awesome library and I think it can help with your problem :)

Upvotes: 1

Related Questions