React: When To Use A State-Management Solution?

React: When To Use A State-Management Solution?

An introduction to state management with a concise guide on when and how to implement it

GeekyAnts is known for its experimentation within the development community; the following article reveals the events and discoveries that transpired at the recent live talk organised by the innovators at GeekyAnts. The panelists- Sanket Sahu, Atul Ranjan and Sankhadeep Roy, spoke about state management and the various occasions that it can be used as a solution in React applications along with many use cases to make the topic comprehensible for viewers. This exploration brings to light various important aspects of state management while also explaining why, when and how to implement it along with a recap of the previous session.

Recap of the previous session/ Advanced React Patterns

The panelists provided a summary of the events and happenings at the previous session which traverses through various advanced React patterns as an exploration point and base for the current talk. During the previous discussion, the panelists discussed the many ways to implement a pattern along with the pros and cons of each. The patterns that were spoken about are compound component, control props, custom hook, props getters and state reducer. It was important to talk about these various patterns when the talk commenced as this explains further about how React gives control to the User Interface to control data which highlights the importance of implementing a state management solution.

What is state management?

In application development, state management denotes how each state of a single or an amalgamation of user interfaces is controlled for better performance. From an app’s perspective, anything that has a UI and is controlled by data is a derivative of a ‘State’ in that application. As an example, the cart feature in a shopping website will have its own ‘State’. The product directory will have its own state and so on. To oversimplify, the data that drives the UI of the app constitutes a state and considering the importance of state in an application, its management is critical, which is also called ‘State Management’.

Importance of state management

  • Each component that’s being designed for an application requires its own state and the volume of data that is being exchanged, especially in a more complex app, makes it absolutely necessary for a state management system to be implemented for a well-functioning application.

  • Implementation of a state management system is critical as this defines how the User Interface is updated as and when the data changes, eventually driving the entire architecture of the application.

  • The websites/webapps that were developed in the past didn't require such a system as most applications were Single Page Apps where the data would simply be generated and managed on the server before being rendered. This had to change as the Frontend became more complex and an efficient state management process became a necessity.

  • Using React for efficient state management grants us further control of the UI and allows the frontend to have more power from a data perspective.

Local vs global state management

Putting it simply, local state management denotes how the process is localised to a single component and independent of others while there are shared processes in the case of global state management. In most cases, it is highly recommended that you maintain a localised state for your application unless you are developing a highly complex application which necessitates heavy internal interaction between the various components. UseState() is suitable for most cases, but in certain cases, it also makes sense to elevate a particular component’s state to its parent or move it to global state as needed.

How to manage the state of a component? To explore more on how to manage the state of a component, several examples were taken up and discussed in length. The aim was to see whether it would be possible to keep certain components in a localised state and to determine where to move some components to global.

The first example that was taken to elucidate this point was forms which are most suitably maintained in a localised state. This is because forms do not contain many complex components and usually can be designed with just a feature to enter the username and password along with the submit button. But the same cannot be said for a form which has a more complicated framework as in the case of multi-step forms; in which case, it would be helpful to use prebuilt libraries such as Formik and React Hook Form.

In certain cases you may need to add nested objects which need a particular structure, one way to go about this is to use the useReducer() hook or any of the aforementioned form libraries. It is highly recommended that objects in the form are localised as far as possible to prevent it from having effects on other components of the application. On the other hand, information such as authorization data is generally kept in a global state as there is heavy interaction between the many components of the application.

In the use case of animations, they are mostly kept in a localised state as there is not much interaction necessary between the various elements. You can always interrupt an animation from a certain hook to make it global if necessary; which is mostly a rare occurrence. An exception we can take up to look at this objectively is a music app where the header is in one document and the scroll bar which is built in another; there will be multiple occasions where these elements need to interact for the application to function suitably. In cases like this we might need to manage the state to set it to a globalised stage.

Alternatively, when designing a shopping cart you may have to set the state to global as an application of this sort contains various components, i.e. cart, products, wishlist, payments, profile etc, which work in tandem for the application to function optimally.

The most important part of deciding which state to use when designing an application is to understand the various features of the application and the method to develop this. Planning this well in advance will give you a thorough understanding of which state to manage your application for a smooth development process and a well-functioning app. Server side applications generally require a flow which comes from dependencies between the various components of the application which makes it critical to implement state management; meanwhile, SPAs generally do not have such dependencies.

Options for state management

Here are some popular industry favoured frameworks used for state management:

  • The most favoured software for state management in the dev world is Redux for the better understanding it provides in terms of the flux pattern. Redux asserts a functional paradigm which helps with controlling the development environment better by defining various actions.

  • Another preferred software to manage the state of applications is Jotai which is a lot like Recoil except that it is documented better making it easy-to-use for developers.

  • Context is another great option to use and we don’t even need to install another library for this. It comes inbuilt with react and can be a very handy tool if used correctly.

  • The functional philosophies of Zustand is another viable option to manage states and its similarity to React Hooks provides developers with a familiar environment.

  • In most cases, Redux is a highly recommended option for low-level applications as close to ninety percent of state management functions are covered by the toolkit. In many ways, it models the data by packaging it in separate files, preventing the hassle of doing it manually.

Considerations before selecting state management library

The primary consideration when singling out a library to manage the state of a project should be heavily dependent on the use case, i.e., the type of application that you are trying to build. Once you have a thorough understanding of this, the next step is to read up on the documentation of the software along with examples of how it has been used along with researching the development community’s take on it. It is critical to read about the flexibility of modification that one state management library might have over another to handle any hassles in the long run.

While it is integral to have knowledge of your partner and their experience, stress more on their capability to code using the required code while checking up on their previous deliverables for a similar application as their familiarity with the favoured tech stack plays a huge role and the impact it will have on the success of the application. Here are some pointers to look for:

  • Use case

  • Documentation

  • Examples

  • Leaning curve

  • Boilerplate/ LoC

  • Community following

  • Flexibility of modification

  • Experience

Conclusion

This is one of the many sessions that are held on a regular basis by GeekyAnts and there was indeed a lot to think about and take back from the talk. We have a beginner’s guide where we can take you on a step-to-step journey on how to learn development on React which can be accessed through this link. While this initiative is still at its beginning stage, you can access these modules and sign up to receive more information through the Discord channel. Hope you look forward to other stimulating conversations like this one about the latest innovations in our tech community!