Check out a free preview of the full Complete Intro to React, v6 course:
The "ESLint & Hooks" Lesson is part of the full, Complete Intro to React, v6 course featured in this preview video. Here's what you'd learn in this lesson:

Brian walks through how to configure ESLint to enforce rules for hooks recommended by the React team. A brief demonstration of some of the rules enforced by ESLint is also provided in this segment.

Get Unlimited Access Now

Transcript from the "ESLint & Hooks" Lesson

[00:00:00]
>> Let's add to our ESLint config now. So I want you to come in here and we're gonna do npm install -D ESLint-plugin-react-hooks @4.2.0. So this is another set of rules that specifically applies to react hooks. It's put out by the react team. It's like their best practices.

[00:00:37] The one thing that it depends on. So I'm gonna show you how to make custom hooks here in just a second that you use blank naming schema. Cuz that's what it's checking for is, if it has use blank, then it thinks it's a hook. And if it doesn't have that, it doesn't think it's a hook.

[00:00:53] So that's why we use that use nomenclature. Okay, we did that now let's go back to ESLint config, eslinterc.json and here inside of, basically any order before prettier. Prettier has to be the last one. So I'll just put it under here. Plugin: react-hooks/recommended. And that's it. So this add like another layer of checking just to make sure that we don't have bugs with hooks, cuz they do have some peculiar behavior habits and I'll show some of them.

[00:01:42] So now if we go back over to our SearchParams and we do exactly what I just told you not to do which if true, 1 + 1 doubles or triple = 2. So this is gonna tell me that unexpected constant condition. Well, I mean, that's good that it detects that but, if that then const something I'll say animal.

[00:02:14] And setAnimal, = useState(dog). I'm gonna get an error here saying right this one useState is called conditionally, this one, this little right here. And there's a rule called rule of hooks. This is gonna prevent you from doing stuff like this. And same thing here, if I try to do for let i = 0, i < 3 i + +, Oops, it's gonna get upset at me again.

[00:03:03] Saying like, hey, you can't do that inside of there. So actually let's do something kind of fun just to show you. Math.floor, math.random, Times, 3. Yeah. And then we're gonna put location underneath here. So what's actually gonna happen here is because I'm calling these hooks randomly, it's gonna really mess with what's in here in this particular useState.

[00:03:46] So I have to run my server again. You don't have to do this by the way, I'm just showing you how messed up this can get really quickly. [LAUGH] Did it just break? It actually just throws an error is like, hey, you have less hooks than you did last time, what's going on?

[00:04:09] I give up. Please figure out your stuff and come back. So that's good on react, I actually didn't know it would do that. What I would have expected to see is that it would sometimes show dogs, sometimes shows Seattle, sometimes show dog and it would just not know what to do with itself.

[00:04:25] But in this case, it just says, no, I'm not gonna to fix this you have to first. It's nice that they do this that really helps you. You kind of get into the habit really quickly of never putting things inside of if statements or for loops with hooks.

[00:04:39] Normally all of your hooks are just gonna be right here at the very, very top of your component and then you use them underneath it.