Member-only story
How One Conditional Can Entangle Your React App
A cautionary exploration of how a lack of intentional composition can impact your React project
It is perhaps obvious in software engineering that even a single character in an application’s code can change the semantic meaning for the interpreting computer.
However, it may be less apparent that a single expression, a simple conditional, could impact the design patterns and architecture of a React app over time.
Yet, my team has experienced the painful repercussions of such a seemingly insignificant implementation choice directly. Upon further reflection, it all could have been avoided.
For those unfamiliar with my writing, I love to mentor new developers. I tend to write articles concerning real-life scenarios that I encounter with my team or with new developers that I am mentoring.
In this scenario, a simple conditional expression led to a complex entanglement of UI logic that became difficult to reason about, harder still to maintain and extend, and ultimately impacted the entire application.
Hopefully, by reading about this particular experience, you can avoid this scenario in your own projects in the future.
To fully appreciate the simple origins of such a complex problem, we must first establish a base component similar to Listing 1 wherein we create a simple user input form to satisfy the task of creating a “Contact” in an application.
A contact, in this context, is simply an object that contains name, email, and phoneNumber properties. Here is some code showing these properties:
As you can see, this code is fairly straightforward. There are no red flags or concerns here from my perspective.
Furthermore, there would be no reason to suspect that we should have a full-scale architectural discussion based on this seemingly insignificant use case.
