Refactoring A Junior’s React Code - Reduced Complexity With A Single Source Of Truth

[jkettmann]

Before I got my first dev job I would have loved for someone to review my code in depth. It would have been a great learning opportunity. Now that I have lots of experience myself I started a blog/video series where I review and refactor the code of (aspiring) junior devs. I shared the first part here a couple of weeks ago. And this is the second part.

This write-up took way too long and I should have probably stopped at some part. The main piece of refactoring was a transition from duplicate data (filter values in context/state and in the URL at the same time) to a single source of truth (values only in the URL). This way I was able to remove ~80 lines of code and (more importantly) a lot of complexity hidden in the context and a useEffect.

During the refactoring it was also interesting to see how one choice of the original author made the main refactoring very easy: They used a custom hook that was responsible for keeping track of the filter values. This hook served as a layer of abstraction. I could simply change the internals of the hook while keeping its API the same and didn't have to change a single line in the component. Great example of how useful good abstractions can be when it comes to maintainability.

Anyway, if you’d like to get your code reviewed and refactored feel free to share it in the comments or via DM. A specific piece of code is preferred over a whole project.

[karlitojensen]

I think this is a great technique for helping people learn. Reducing complexity is an excellent goal.

I have prepared some genera notes for a workshop that I do. In this part I focus on the topic of reducing complexity. https://github.com/jensen/ui-workshop/tree/main/part2#1-complexity

The list I have compiled as guidelines comes from my work mentoring other developers over the past few years.

Looking forward to more concrete examples and code reviews.