At SmartLogic, React has been our go-to library for front-end development. It provides responsive UI which makes our clients and their end-users happy, and it allows our dev team to take advantage of reusable components which speeds up development and frees up time to tackle more complex problems.
For smaller scale apps, state can be managed through typical React conventions. However, as apps grow in scale and complexity, a multitude of tools can be utilized to more effectively manage data flow and state management.
React state management
For projects which manage state with React alone, state management and manipulation has been historically difficult. The data available within a child component must be passed in via props defined in the parent component. This convention of data handling works fine for smaller projects, but as apps grow in scope and complexity, this convention quickly becomes difficult to maintain. As components become more complex, child components contain components which contain components, and the necessary data must be passed along as props at each level. This problem is so common that is has come to be known as prop drilling. Additionally, as components become concerned with a variety of app domains, the amount of props passed along at each level increases as well.
React Context - a new solution for state management
Fortunately, React 16.3 introduces the concept of Context which helps to greatly alleviate the messiness of prop drilling. Through the use of the Context Provider and Consumer APIs, app state can be accessed from within any component, regardless of how many levels it is nested, without that data being passed in from a parent component. Additionally, parent components which would typically need access to app state in order to pass data down to child components can now remain completely unconcerned about app state. As a result, less components become tightly-coupled together, and more components can remain flexible and much more reusable.
Redux - a robust and reliable solution for state management
Prior to the introduction of Context, Redux proved to be the most effective solution for reducing prop drilling and enabling access to state throughout the app. The new React Context API offers a more streamlined and lightweight solution to these same problems, and can eliminate the need for Redux on many occasions. However, Redux provides a much more robust and reliable solution that offers some advantages over Context.
Redux hinges on the implementation of a single source of truth known as the Redux store. The store is the bucket which holds all the data within the app, and can only be accessed and manipulated in very specific, predefined ways. As a result, data manipulation through Redux is very controlled and consistent.
Additionally, Redux enables the use of powerful middleware libraries. Redux-sagas, for example, provides the ability to perform redux functions asynchronously, which comes in very handy when making API calls. Middleware like this proves to be very useful in solving complex problems and can result in significant performance increases and UX improvements over Context.
Conclusion
The introduction of Context has transformed the landscape of React state management. Gone are the days of deciding between prop drilling with plain React or making the significant time investment to set up Redux. Context now represents a much needed solution to prop drilling that is quick and easy to implement. However, as the complexity and scale of the app increases and as performance becomes a higher concern, Redux remains the tried-and-true solution.
For more on redux design patterns and reduxsauce, read our next blog post in this series.
Header photo by jesse orrico on Unsplash
