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.

The only things we need for this scenario is useState and useEffect . It means that using local component state is enough in this case.

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

Firstly, if we try to do the same things as Scenario 1 for ProductTable, we could recognize that products and fetchProducts will be duplicated. Therefore, we can solve the above problem by creating a custom hook for managing 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

When you find yourself passing state between components over and over again (as the issue mentioned above) or bubbling up child component state level after level so that a parent or higher-order component can use that state, you’ll know it’s time for a solution.

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

In this post, we have took an overlook into the way to manage the local state and the global state in our React applications. Furthermore, I have given some samples for the basic scenarios which could happen when we implement the states into our React components.

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://www.telerik.com/amp/3-essential-tips-for-managing-state-in-react-applications/WEx1ZE1sRUVUWkE5S0dNbEhBNXJyUkU3T1Q4PQ2

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 1M monthly readers.