React is a declarative component-based Javascript library used by thousands of developers around the world. Their website reactjs has a ton of tutorials and information about how to get started and how to use it so I won’t focus on that now. Let’s talk about amplifying React by using other frameworks such as Redux. Again, before we get started, check out redux for more information on it.
Building a web page with React is straightforward once you get the hang of its mechanics. You can fairly quickly acquire the knowledge required to make a simple page, but as the complexity of your page increases, so too does the complexity of the code. In face the code will increase in complexity much faster than the web page and so we are faced with a conundrum. We can add a little “bloat” to our application by adding a global state management framework like Redux, or deal with convoluted code.
Let’s talk about the causes of complexity in a React application. In React, your components are arranged in a hierarchy that you define, with the possibility of having parent and child components. Data can be passed between these components through the use of something called props. A parent can pass variables to its children through props, and a child can pass data to its parent through a method prop that the parent passed in. Sounds more complicated in writing than it really is but this use of props becomes hectic if you need to pass a prop down multiple nodes down the hierarchy. Then some of your components will have new methods defined simply to facilitate passing props down. At some point, you’re gonna need a global state so you can get rid of this headache. The question we now ask is: when is this point?
I am in the process of writing a small landing page application which would otherwise be done using WordPress or a similar framework, but I wanted to reuse this code in the future. I decided to practice my React knowledge and use only vanilla React for this application and see how it goes. Even though this app only has 4 total pages that the user sees, there are multiple child components within these pages and a “global” component that sends information to a database. Even this lightweight uncomplicated page might have a components with grandchildren causing readability issues. Due to the effort required to set up Redux and to work with it in comparison to just React, I think components with grandchildren is about the threshold where you would be forced to use a state management framework. Save yourself the trouble and learn Redux because in larger applications, it stops being a quality of life improvement and it becomes a necessity.