Via Barberini 29, 00187
+39 06 772 50 136
+39 06 770 70 449
Rende (CS)
Contrada Cutura 119, 87036

State management in React – the comparison

State management in React: state optimization.

Front-end based component architectures, (component based architecture)

it is definitely convenient to manage the page status from the top of the components tree, as in the root component: this allows to have a stateless UI and a data orchestrator root component, will therefore have a business logic concentrated at the top of the tree which implies high cohesion and low coupling, with the result of having a more maintainable code, easily testable and improved reusability.

The problem with having a data orchestrator root component and deep tree is that there will be a long data pass (Props) from the root to the UI:

This phenomenon is called Prop-Drilling and represents a problem. In the case of deep tree’s it implies complexity in tracking and managing data, as well as difficulties in managing the status of the application.

To overcome Prop-Drilling, Redux is a very useful technology: it is a JavaScript library that allows you to manage the status of applications in an efficient and comprehensive way.

Redux allows you to create a store where you can store the status and then connect each single component to it, in this way you avoid Prop-Drilling, the state is read-only and can change only through specific functions (Reducer). This operation, in

addition to being useful for implementation purposes ensuring stability, allows you to do testing in a targeted and functional way.

React was created and is still maintained by Facebook.

It is one of the technologies that is most popular in the FE field and not only, in fact, in addition to the context of web applications, there is React Native with which it is possible to create native mobile applications using React technology.