Under the Hood: Prioritizing Technical Debt in React
Prioritizing technical debt on a function level is a big win. It’s what makes the analyses actionable. Have a look at React using the CodeScene tool.
Behavioral code analysis is a young discipline.
One of its sweet spots is to detect, prioritize, and manage technical debt based on data from how developers interact with the code.
In this article we put the technique to use on theReactJavaScript library from Facebook to detect technical debt and suggest possible actions.
Detect Hotspots in React
React is a popular JavaScript library for building user interfaces, and we are using it ourselves at Empear. As such, I’m familiar with React as a user and I like the programming model. React is an important step forward. However, I never looked under the hood at the actual code. Normally, this would be a daunting task given the ~130,000 lines of code in React. Not so with a behavioral code analysis; by building a hotspot map, we get a quick overview of the codebase and immediately know where the most interesting modules are. Let’s have a look at React using theCodeScenetool to automate the analyses. You can follow along in theinteractive analysis.
Adam Tornhill is a programmer who combines degrees in engineering and psychology. He’s the founder and CTO of CodeScene where he designs tools for code analysis. Adam is also a recognized international speaker and the author of multiple technical books, including the best selling Your Code as a Crime Scene and Software Design X-Rays. Adam’s other interests include modern history, music, retro computing, and martial arts.
Subscribe to our newsletter
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Semper neque enim rhoncus vestibulum at maecenas.
Ut sociis dignissim.
Latest Articles
Change coupling: visualize the cost of change
Code can be hard to understand due to excess accidental complexity. Or, it can look simple, yet its behavior is anything but due to complex...
CodeScene's IDE Extension brings CodeHealth™ Analysis directly into your editor
We've just launched an IDE Extension for VS Code, helping developers tackle code complexity within the editor. Read more and try it out!
Example of a functional programming refactoring pattern
In this post we'll demonstrate an example of a functional refactoring pattern.