How to manage states in React applications effectively

Vũ Quang Nguyễn
Apr 8 · 4 min read
Template created by www.canva.com

This article assumes that you already have a basic understanding of React/Redux. By the way, whether you have some knowledges about Presentational Container Pattern, you would find the out-of-box thoughts in this article.

Consider: We want to create the search text box in a table that updates the items of that table and have no effect to other components. Should we create action, reducer and put this state into the store?

To be honest, you don’t need it. When you start to build your application in the first period, local component states potentially help us in almost components and modules.

While using most of my working time as a “janitor”, the popular mistake that I usually see in some projects implemented Redux is putting every states into the Redux store, then creating actions and reducers for each related states. Therefore, the nightmare begins - your Redux store is larger and larger. In some days, it is as much large as it could splash you everyday, that you have to wonder why you implemented Redux in your application.

Absolutely, the state management (as Redux) could be complex but it doesn’t mean that the state management always become a concern while the application grows. It relies on the way you implement Redux in your applications.

So, I give some below scenarios. They are the steps we should go through while we are building a component or even an application.

Scenario 1: As a user, I want to view products as a list and have a text box for searching products.

Scenario 2: User want to have a Product Table with different UI but the same products.

Then, in next steps, we replace the useState and useEffect of products by our useProducts custom hook.

And, we can simply implement useProducts into our new component as ProductTable

Following the above snippets, if we put ProductList and ProductTable in the different pages, it would be fine. Conversely, the fetchProducts will be executed twice when we implement 2 above components in same page. Actually, this is a known issue because we expect to follow methodology towards independency between components.

Though, we are totally able to fix this issue by implementing useProducts in the parent page instead of each components and passing products as props for each components.

Scenario 3: Our application is large enough to implement state management

We should use the state management if needed, but please keep in mind that we can use local state and global state together. As a stress reminder by Brandon in this article:

It’s ok to use local state, especially if it helps you keep global state clean and organized.

Conclusion

With all this in mind, hope that you can keep not only a clean and readable state management but also reduce the complex logic handling in your applications.

Reference resources:

https://medium.com/voobans-tech-stories/5-ways-to-stop-wasting-renders-in-react-redux-73b3c5d86f50

https://www.welcometothejungle.com/en/articles/atomic-design-front-end-developer

Geek Culture

Proud to geek out. Follow to join our +1.5M monthly readers.