How I increased my React development productivity by “8%?”
I am a full-stack/React dev, and I like to explore and build various dev tooling to improve my productivity.
Recently, I was trying to solve one simple problem: when I am working on a project that I don't know much about, I find it quite hard to orient myself in the codebase. So I made a tool to solve it: LocatorJS. It allows me to click on a component, and it would open my editor in the exact place where the component is in the codebase. And not only components but any React element (div, span, a, …).
But, when I made this tool and used it, I found out that I use it even for components that I know exactly where they are in the codebase!
That one click is so fast that it is much faster than going there manually. It is always one click vs. a combination of several keyboard shortcuts, mouse moves, clicks, and/or keystrokes in search fields.
And this going from browser to editor and back is happening so often, especially when changing some styles, it is worth optimizing it.
So I have released LocatorJS as a browser extension (Chrome, Firefox, and more). It works out-of-the-box with most React dev stacks (Next.js, Vite, Create React App). And the main thing it can do is highlight React components or elements, and when you click on them, it redirects you from the browser to your editor (you can choose from VSCode, Webstorm, Atom, and others).
It is a simple tool that solves a simple problem. If you want to try it go to locatorjs.com or directly to Chrome Web Store.
I would really like to express how much time it saves me, so I will try to make a simple estimate. The rest of this article is about how I came up with the 8% productivity increase, which you can totally skip if you believe that trying new tools is better than reading about them 😉
So why 8%? Let's do some basic math: I have 8 hours per day. I spend half of it actively programming (the other half is communicating on Slack, reading docs, video calling, and making coffee 😀), so it's 4 hours of programming. Around half of it, I spend with React (the other half is NodeJS logic or any non-React frontend logic). So it is a total of 2 hours a day spent with React and working somewhere around React components.
I go from the browser to the editor every day maybe 100 times, sometimes looking for components that are completely unknown to me and sometimes going to edit a component that is in the same file but 10 lines next to a component I edited 10 seconds ago.
On average, it could save me 6 seconds per one click (wild guess)
That would make around 10 minutes when I have 2 hours of productive focus time. It is 1/12 of total time, which means roughly 8%.
Let's go wild with the calculations. The average React developer salary is $9189. When it saves 8% of 1/4 of their total working time, 2% of 9189 is $183 saved per month. So LocatorJS's price per month could be $149, right?
Just kidding, measuring developers' productivity is super hard, and the only thing ever worked for me when evaluating tools and frameworks I wanted to use, is trying it hands-on. LocatorJS is free and open-source, so feel free to try it, fork it, or even contribute 🚀.