Fix Your React.js Slop With react-doctor

I've been working on a side project with two other people, and they are purely vibe coding. I actually don't even think that they're looking at the code at all. So, you can imagine the slop that they're producing. And so, when I found React Doctor, I was really excited because I need a tool to help me control the LLMs and the cut coders that are working on this project. So, React Doctor is basically like a big fancy linter. It's going to run over your project extremely fast, actually. It's going to run in say a couple of seconds cuz it uses oxlint or however you say it. And it's going to give you a ton of feedback on things that you can improve. So, let's go over to my project, and I'm going to run it with bun x React Doctor, and I'm just going to run the latest version, and I'm going to run it in verbose mode because that's going to give you even more feedback. So, I ran that over a project that includes a web worker. So, it's a TanStack start project and then two other Cloudflare workers. So, you can see that it scanned almost 500 files, and it did it in 2. 1 seconds, and my project needs work. And this is even after merging a big pull request to fix a bunch of other issues. You can see that this pull request removed almost 3,000 lines of code, and then this is the second run that I'm doing where my score is still only 62. So, I need a ton of work. But, let's go have a look at the sorts of things that it is catching. And one of the big things that I like that it catches is dead code. So, if you're exporting something that doesn't need to be exported, it's not being imported by another file, it's going to catch that, and it's going to remove the export. I really like that because it reduces the surface area of the component or the function or the file or whatever it is. It's also going to remove files that just aren't used anywhere else in the code, and I like that. That's how I got the 3,000 lines removed. Okay, so let's have a look at this first one. 10 sec start get mutation. So I think that this is saying that a mutation is a get but it has side effects and so the method should be post. That is perfectly reasonable. I agree with that. That should be the case. So this one is JS combine iterations. So this is another good one. So I have dot map and dot filter iterates over the array twice, one for map, one for filter and you can combine that with a reduce or a four. These are the sorts of things that I would used to go through and do manually and now I'm just going to get clawed to do it for me. So these are async parallel three sequential await statements that appear independent. Use promise. all for parallel executions. So this is one that I mean technically it's true. You don't need to do the sequentially. But promise. all can introduce other bugs into your application. Sometimes it's not even worth it. Sometimes these functions are so fast that it doesn't actually make a meaningful difference. So this is another tool that uses. Nip is a different piece of software. You can actually run that on its own. But react-doctor does it for you. And so these are unused exports. Again, this is something that I really like. I don't think something should be exported if something else doesn't actually import it or if something else shouldn't import it. Async await inside of a for loop runs the call sequentially if independent operations. Yep, that is perfectly fine. Again, it's using promise. all. I would rather it use promise. all settled. And you can actually see it has done some of these. You can see here it there was three sequential queries. Actually, this is on the client. I actually think this is probably fine to do this on the client. This is a good call. This is another one that's interesting. So it's making design recommendations. Design no bold headings. So font on bold So, font bold on H1 crushes the counter shapes at display sizes. Use font semi-bold 600 or medium. So, this is an accessibility thing. It's labeled here as design, but it's really an accessibility thing. If you have bold headings, they can crush together as you zoom in and stuff. Okay, so the way that I would fix these issues is just go into Claude, I'm just going to copy this command, and then I'm just going to tell Claude run this and fix all the issues. And then Claude is just going to go through and fix all of the issues. So, my issue with this is it's going to touch a ton of files, and the other guys working on the project, if they have open branches, it's going to conflict, and I'm the one who has to go resolve it for them. So, that's not ideal. Okay, so while that runs, I'm just going to talk about how I would like to use React Doctor in the future, and that is with a GitHub action. So, when somebody creates a pull request that they want to merge, it's going to run this action, and it's going to run React Doctor, and

I might even cache the previous score and say, "If you reduce this score at all, or there's more issues than there was before, then you need to go and fix those before you can merge the pull request. " Ideally, you would get your score to 100, even if there was things that you wanted React Doctor to ignore, and you can do that with either your rules file, or comments inside of your code, just like you would with any other linting rule. And you can do that in JSX as well. So, Claude is asking me now if I want to do everything, and I'm just going to get it to do everything, and it's just going to go through and fix all those issues for me. So, that is React Doctor, a really good piece of kit. It's from the Million team, so you know that it's going to be good. If you like this tool, make sure you go over and give it a star. If you like this video, make sure you give it a thumbs up. Thank you for watching, and I'll see you on the next one.