‫Let's now actually break the main rule
‫of hooks that we just learned about,
‫which is that hooks can only be called at the top level.
‫And here I still have the Used Popcorn app open
‫both in VS Code and in the browser
‫and so that's because we will keep working on this app
‫in this section.
‫And so if for some reason you closed the application,
‫then make sure to just open it up again here.
‫Now, just like before, I will again duplicate this file here
‫and then I'm gonna copy, or actually I'm gonna call it V2
‫and so again, with this,
‫we then can keep our previous versions of the code
‫and let's actually get rid now of this dummy data.
‫Just like this and also of this comment.
‫So cleaning up the code a little bit.
‫But now let's break some rules here,
‫which as I mentioned before, is always a great way
‫of learning why the rules exist in the first place.
‫So coming here to our movie details component,
‫this is where we will now write some code
‫to break that rule.
‫But let's actually start by again searching
‫for some movies here.
‫And then I will open this one up so that we can check out
‫the hooks that we actually have right now
‫in this component.
‫So in the dev tools, check out the movie details component
‫which is this one,
‫and so down here we have the list of hooks that we just saw
‫in the previous lecture.
‫To make this even bigger
‫and so indeed you see that the hooks are actually numbered.
‫So in fact, each of the hooks is identified by React
‫by their order number, not some name or anything like that,
‫but really only the number.
‫So this first hook here is exactly this movie.
‫Then we have the is loading state, which is currently false.
‫Then we have the user rating, which is this one
‫and then we have our three effects.
‫All right, so the three effects down here, okay.
‫Now if we did call a hook outside of the top level,
‫so basically if we called a hook conditionally,
‫that would mess up this entire order here
‫and so that's where we would then run into problems
‫and that's exactly what we want to do now.
‫So let's experiment here
‫and let's say if the IMDB rating is greater than eight,
‫then we want to create two new variables called IsTop
‫and SetIsTop and then equals use state set to true.
‫Now, as we save this, VS Code will immediately complain
‫and tell us that here we are not allowed to use
‫Use State conditionally, okay.
‫But we can actually disable this ESLint rule.
‫So just write this comment here ESLint-disable
‫just like this and then it should work.
‫I mean, at least here in VS Code,
‫we no longer get the problems that we had before.
‫So let's reload here,
‫then let's again search for "Interstellar."
‫Okay and now I will first select this one here,
‫which has a rating that is not greater than eight.
‫And well here we already have some problem.
‫Ah, it's because this actually must be after
‫the restructuring.
‫So of course at this point, the IMDB rating variable
‫is not even defined yet.
‫So let's just try that again.
‫And again, let's select this one here.
‫And so for now, we don't have any problems.
‫So let's again check out the state here
‫or the list of hooks and so indeed we have our six hooks,
‫so the same three states as before and the three effects.
‫So that's because the rating in this case is just 1.7
‫and so then this used state here was not called.
‫But now let's check out what happens
‫with "Interstellar" when the rating is greater than eight.
‫So as we click,
‫well, our application immediately stops working.
‫So let's come here to the console
‫and then React immediately tells us that it has detected
‫the change in the order of hooks called in this component.
‫So it tells here actually some helpful information.
‫So in the previous render there were three used data hooks
‫and then the number four was an effect.
‫So this effect right here was hook number four
‫before in the previous render
‫and that previous render actually happened after we clicked
‫on the movie but while the movie data
‫had not been fetched yet.
‫So at that point the IMDB rating here was still undefined
‫and so then this used data hook was not called.
‫But then as soon as the data arrived,
‫the IMDB rating was indeed greater than eight
‫and so then React called use state here
‫and so then on the next render,
‫the fourth hook was no longer the use effect
‫but this state right here.
‫And so therefore, now clearly we can see
‫that our linked list of hooks is different.
‫And so React is not happy about that at all.
‫So let's, of course, turn this off
‫and then it should go back to working.
‫So this one is pretty obvious that we shouldn't use it
‫and also as you saw, ESLint immediately warned us
‫of that problem that we were creating.
‫However, in certain situations,
‫you might not have ESLint installed and so in those cases,
‫you really need to be very careful.
‫Now one more subtle thing that can happen
‫is an early return.
‫So if we say, if IMDB rating greater than eight,
‫then let's immediately return some JSX here.
‫Let's say greatest ever.
‫And so if we do the same thing as before, "Interstellar",
‫then here the IMDB rating is less than eight.
‫But as we click here,
‫then we run into exactly the same problem.
‫Now this time the error message doesn't contain
‫the previous list of hooks, but still it tells us
‫that this time fewer hooks were actually rendered
‫and so that's because right now we only have the movie
‫and so these three states, but then the effects,
‫so the three effects that we had,
‫they are now no longer created.
‫So instead of the six hooks, we now only have three hooks
‫and so therefore, this again creates a big problem
‫because like this, we cannot guarantee that all the hooks
‫are always called in the same order.
‫So be very careful of that
‫and so now after this small experiment,
‫you know what these error messages here mean
‫and so hopefully you enjoyed this small experiment.
‫Let's just turn this off.
‫And also let's remove this line right here
‫because of course we want ESLint to work
‫so that it can warn us before we create a bug like this.