Complete Intro to React, v5

Complete Intro to React, v5 Configuring ESLint for Hooks


This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

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

Brian installs the ESLint plugin for React hooks, and configures ESLint to check and warn for conditionally called hooks.

Get Unlimited Access Now

Transcript from the "Configuring ESLint for Hooks" Lesson

>> Brian Holt: Open your console for just a second. I'm gonna stop my server, but you could just open a new terminal as well. I'm gonna say npm install -D eslint-plugin-react-hooks.
>> Brian Holt: This is official rules from the React team about writing hooks.
>> Brian Holt: So I want to introduce you to a couple of these.

>> Brian Holt: So open your ESLint config really quick, and here inside of the rules, we're going to add a couple of them, react-hooks/rules-of-hooks, and we want that 2 error. So 2 will make it error on that,
>> Brian Holt: And we also I need to add it to plugins as well.

>> Brian Holt: react-hooks, like that.
>> Brian Holt: Okay, and I am missing one of them here in my notes, let's just go find it. ESLint React, plug-in React hooks, this one.
>> Brian Holt: And I have another one here that we should have in there. These ones, exhaustive depths.
>> Brian Holt: So put in that one as well.

>> Brian Holt: And we'll do 1.
>> Brian Holt: So this one is going to force you to, we'll actually about later, but it has to do with the facts. So again, just to remind you, 0 is turn off, 1 is worn, and 2 is make it an error, right? So anytime that you mess up rule of hooks through an error, anytime that you have an exhaustive depths thing, it's just worn.

>> Brian Holt: So let's take a look at what that actually does for us. If I say,
>> Brian Holt: if {false}, or something like that, I don't know, and then I put this in there, it's gonna say, hey look, or this one right here, where is it?
>> Brian Holt: There we go.

[00:02:33] React hook is called conditionally. React hooks must be called in the exact same order in component renders. And you can see that comes from rule of hooks.
>> Brian Holt: Rules of hooks, that makes sense? So it's gonna prevent you from doing stuff like that.
>> Brian Holt: Now honestly, once you get used to doing that, and you just know never to do it, it's not really that helpful.

[00:02:57] But as you may imagine, if you ship this to your coworker that doesn't know about that, this will prevent them from doing things that you don't want them to do.