00:00:00React just got itself a new anti-pattern scanning tool called React Doctor.
00:00:05It was created by Aidan Bai, the same super talented developer who created Million.js,
00:00:11React Grab, React Scan and Amy.
00:00:14And in today's video, we're gonna take a look at this tool, see how it works and try it out
00:00:19for ourselves.
00:00:20It's gonna be a lot of fun, so let's dive into it.
00:00:27So React Doctor is a simple CLI tool designed to detect common React anti-patterns such
00:00:33as unnecessary use effects, accessibility issues or prop drilling.
00:00:38Under the hood, it leverages OX lint, one of the fastest JavaScript linters written in
00:00:43Rust.
00:00:44And because OX lint is built on Rust, it can scan tens of thousands of lines of code in
00:00:49milliseconds.
00:00:50It uses this to build an abstract syntax tree or AST of your project looking for specific
00:00:56React patterns like hook usage, prop structures and component boundaries.
00:01:01It is written on more than 47 best React practices and it includes helpful scans like, for example,
00:01:08scanning for accidental hard-coded security keys like this one or like this one where it
00:01:13checks for a loading state pattern and provides a good report on when to use it opposed to
00:01:19when to use use transition instead.
00:01:21And this project is completely open source and still quite fresh.
00:01:25So this is a great opportunity for the community to contribute to the project by adding other
00:01:30good practice checks that you think might be missing here.
00:01:33I think the coolest part of this project is the UI.
00:01:36It has such a nice design and aesthetic to it, plus thanks to OX lint, it's very speedy.
00:01:42And on top of all of that, you can also run it as a skill for your coding agent and you
00:01:47can also use it programmatically on something like a Node.js API, for instance.
00:01:52Now let's try this tool for ourselves.
00:01:54So I have this React-based code project that is just a basic stock chart visualization tool,
00:02:00which I wrote six years ago, back when AI wasn't even a thing yet.
00:02:04It's going to be very interesting to see how well I wrote React code six years ago.
00:02:09So I'm going to run the React doctor command in my repository.
00:02:12And as you can see, we instantly get a result.
00:02:15And look at that.
00:02:16My project has a nearly perfect score.
00:02:18I mean, it warms my heart to know that even six years ago, I was writing good quality React
00:02:24code.
00:02:25All right, let's look at what it discovered.
00:02:27So we get a warning about using AI as the key, which is very valid.
00:02:31And then it also recognized that the recharts is a heavy library.
00:02:35So it advises me to use lazy loading instead.
00:02:38And then it also noticed that I have four use state calls in a single use effect.
00:02:44And I should consider using use reducer.
00:02:46All very valid points.
00:02:48Thank you, React doctor.
00:02:49And now let's try running it on a larger code base.
00:02:52So here's a very popular CRM project called 20, which is supposed to be like an open source
00:02:57Salesforce alternative.
00:02:59And it's written in React.
00:03:00So let's clone this repo and see how React doctor evaluates it.
00:03:04And once we run it, we can see that React doctor automatically detects that this project is
00:03:08a mono repo, and it recognizes packages.
00:03:12So let's first do the score for their marketing website package.
00:03:15And as we can see here, it's also pretty good.
00:03:18We do get one error, but that is just a missing alt tag.
00:03:22So I would say overall, this is a very good score.
00:03:25All right, now let's check the front package, for example.
00:03:30This one did a bit worse, because we got 99 errors, but it's still in the green zone.
00:03:35So here's what I would recommend.
00:03:37If you're a developer who wants to improve their GitHub portfolio, this is a nice tool
00:03:41for scanning various open source projects and identify places where you can make significant
00:03:47contributions.
00:03:48So there you have it, folks, that is React doctor in a nutshell, I think it's a super
00:03:52nice lightweight handy tool that can significantly help out with proofreading and sanity checking
00:03:58your React projects.
00:03:59And I will definitely use it in my own projects going forward.
00:04:03And folks, if you found this video useful, please let me know by clicking that like button
00:04:07underneath the video.
00:04:09And also don't forget to subscribe to our channel so you don't miss out on any of our future
00:04:14videos.
00:04:15I've been Andris from Better Stack and I will see you in the next videos.