Case study: a SOLID refactor in React | by Amy Blankenship | September 2023

With TDD, context and hooks

It’s been over a year since I last wrote

Several people have asked me what I consider SOLID architecture, and I said I will answer that question when I come across it. Over the last week I’ve done a refactoring simple enough to write a case study, but complex enough to demonstrate the issues I was talking about. In a surprise twist, this also shows how brackets and even context can aids in maintainability when used correctly.

Before I begin, I want to say that this is not a criticism of my new colleagues. In fact, this codebase has all the comfort of a well-worn pair of jeans. However, the code follows patterns that React’s architecture facilitates, if not outright encourages, and this leads to code that is less maintainable than it could be.

The ticket was simple, if a little vague. Essentially it was adding a search widget that already existed to a view that didn’t have it. Most of the team members were on vacation, so I was a bit alone to deconstruct the code and understand all the intentions of the project owner.

The first thing I did was look for places where this widget was already used. It was used in two places. Not all the nuances of his behavior were immediately clear, but it was clear that

• the behavior was complex, and
• the behavior has been hardcoded at several levels in the widget.

At the end of the refactor, I finally realized that the behavior was similar to these simplified diagrams: