Case Study: A SOLID Refactor in React

With TDD, Context, and Hooks

By sharafmaksumov, Adobe Stock Photo

It’s been over a year since I wrote

Can We All Just Admit React Hooks Were a Bad Idea? Part 1

Several people asked me what I considered SOLID architecture, and I said I’d answer that when I got around to it. Over the past week or so, I did a refactor that was simple enough to write a case study around, yet complex enough to demonstrate the issues I was talking about. In a surprise twist, it also shows how hooks and even Context can help with maintainability when used properly.

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

The Ticket

The ticket was straightforward, if a little vague. Essentially it said to add a search widget that already existed to a view that didn’t have it. Most of the team was on vacation, so I was kind of on my own on…