‫Let's now put some of the things
‫that we just learned in the previous lecture into practice
‫and also magically synchronize our search query
‫with the movie search results.
‫And I actually want to start this lecture
‫with a couple of experiments.
‫And to do that, let's first do a couple of changes here.
‫First, let's set this back to "Interstellar."
‫And I also want to rename this variable here to tempQuery.
‫And that's because now we actually want to get
‫the query state that right now lives here inside search
‫into the app, so into its parent component.
‫So let's cut this from here
‫and we will then later pass in both of these back in.
‫So query and setQuery.
‫Okay, so we're basically lifting this state up
‫because we will need it here inside the app component.
‫So now let's pass those props in
‫so that Query equals Query
‫and setQuery is of course set.
‫Well, not error.
‫setQuery.
‫Apparently I wrote the name of the movie wrong here.
‫"Interstellar."
‫And then also let's get rid of this console dot log here.
‫Okay, let's reload just to clean this up.
‫And now let's do those experiments that I was talking about.
‫So basically I want to write a couple of effects here
‫and then I want you to guess
‫in which order they will be executed.
‫At least that's gonna be your first experiment.
‫So let's write one effect.
‫And then as always, we need to specify a function.
‫And this one will log to the console, the string A.
‫All right, then let's get another one.
‫And notice how this one doesn't have a dependency array.
‫Well, let's actually add it to this one,
‫but the second one here won't have any.
‫So this one will just log the string B.
‫And then finally,
‫I will simply do a console.log right here in the top level.
‫Okay, and now without running this code, let's try to guess
‫in which order these three strings here
‫will appear in the console.
‫So have you thought about it?
‫Well, I will now save
‫and then we will discuss the results.
‫Okay, and actually we have a lot of renders here,
‫a lot of results, but that's because the application
‫has rendered and re-rendered a couple of times.
‫And so then we got all these logs.
‫And also keep in mind that these effects actually run twice.
‫But what matters here
‫is that first we got C, then A, and then B.
‫So why did we get C first
‫even though it appears later here in the code?
‫Well, the reason is that as we just discussed before,
‫effects actually only run after the browser paint
‫while the render logic itself runs,
‫well, as the name says, during render.
‫And so then it makes sense that of course
‫this console.log here is executed first,
‫so during the render of this component.
‫And then we have A and B,
‫which comes from these two effects.
‫And so A is rendered first
‫simply because it appears first in the code.
‫Okay, now let's actually clear the console.
‫And now what I'm going to do is to type something here.
‫And so let's see what happens then.
‫And we get some more outputs.
‫So we get C and B.
‫So is this what you were expecting?
‫Well, let's again analyze what just happened here.
‫So we updated this state here, which is the query state
‫and as a result, the component was re-rendered.
‫And then just like before, this code here was executed
‫and so therefore we see the letter C first
‫and then after that we also have a B log.
‫And so that is this effect here
‫which has no dependency array,
‫which, remember, basically means
‫that this effect is synchronized with everything
‫and so therefore it needs to run on every render,
‫while this other effect here,
‫this first effect is synchronized with no variables at all,
‫which is the meaning of this empty array.
‫And therefore this effect was not executed
‫as the component was re-rendered with the query state.
‫Okay, so now we can change here the strings
‫and we can actually say that this here is during render.
‫This here is after every render,
‫and this is after the initial render.
‫Okay.
‫And of course, this is only for you to keep
‫as a reference here just so we are understanding
‫what's actually happening.
‫So now let's do another one.
‫So one final experiment here
‫which will be yet another effect.
‫Let's call this one D now.
‫And here in the dependency array,
‫we will have the query state.
‫So give it a save,
‫and now watch what happens when I type here.
‫So you see that this one here
‫during render, of course, always gets executed.
‫Then this one here, after every render as well,
‫and still not this one, but we now have this other effect
‫which is synchronized with the query state variable.
‫And so this query just changed
‫and therefore this effect was executed and logged D.
‫And if we keep doing this
‫then D keeps getting logged to the console,
‫while if we changed some of these other states here,
‫then we would not get D logged here.
‫So we cannot really simulate that here now
‫but you can still trust me on that one.
‫But anyway, let's now use what we just did here
‫to our actual advantage in the application.
‫So I will now
‫just comment these out and reload here.
‫And so now the time has come
‫where we actually want to use the query from here
‫right inside this URL where we fetch the movies.
‫So basically we want to fetch movies
‫based on the search query right here.
‫So instead of the temporary query,
‫let's now use query here, give it a save.
‫But of course, like this, it is not going to work.
‫So as we change this here to something
‫nothing is going to happen.
‫And why is that?
‫Well, it's because this effect
‫is not yet synchronized with the query state.
‫So we are using this state variable inside the effect
‫but the effect doesn't know yet
‫that it will have to rerun each time
‫that a query state changes.
‫And so to fix that, we need to include that query
‫here in the dependency array.
‫And actually you see already that React is complaining.
‫So here as we hover,
‫we see that this hook has a missing dependency.
‫So this error or this warning actually is really,
‫really helpful so that we never forget
‫to correctly declare the dependencies of this effect.
‫And so as we give it a save now,
‫let's again reload, and here now we get this error
‫that the movie is not found, which is because our query
‫by default is just this empty string.
‫But if we try now, let's say test,
‫then, well, it still doesn't work.
‫So let's come again to our network tab.
‫So let's just check out
‫if actually the HTTP request has been correctly made.
‫And so by doing this, you're also learning
‫about these very important developer tools here.
‫Okay, so here we see some new HTTP requests
‫and as we click here, we actually do see a response.
‫So there is something there
‫but somehow our movies are still not being shown here.
‫And I think I know the reason for that
‫which is that we are never resetting the error state.
‫So at some point we had some error here
‫but now we no longer have an error,
‫but at no point in the application
‫we are actually resetting it.
‫So we need to also do that here in the finally,
‫or actually better yet,
‫we should do it right here at the very beginning.
‫So basically, always before we start fetching for data,
‫we reset the error.
‫So set error,
‫and then back to the empty string.
‫Give it a save, and now we get some results for test.
‫Okay, and then as we delete this
‫then we are back to "Movie not found."
‫The same for "inter" for some reason, and then "stellar."
‫And now we get some movie here, it's not the same as before.
‫And the reason for that is something called a race condition
‫but at least something is working here.
‫So if I write this a bit slower, then it works just fine.
‫And of course this works with any other movie
‫as long as for now you type slow enough.
‫Now I want to fix this problem
‫that when we have no search query here
‫then it tells us "Movie not found,"
‫which is not really true.
‫I mean, it is true because the API actually searched
‫for a movie with an empty string.
‫But in a situation where we have no query
‫we actually don't even want to search, right?
‫And so let's do that here in our effect.
‫And actually let's do it
‫before we even call this function here.
‫So we can say if there is no query.length,
‫so it's going to be zero in this situation,
‫then simply set to Movies back to an empty array.
‫So basically then removing all the movies
‫from the user interface,
‫then let's also reset the error
‫back to nothing and then return.
‫And so in this situation then the fetchMovies function
‫will not even be caught.
‫And here we can actually go even further.
‫So we can say, like if the query length is less than three,
‫then it's not even worth searching as well.
‫So it doesn't even make sense to have
‫a query just like this, right?
‫So there's no movies really called like that.
‫So going back again to our network tab,
‫if we just type like this,
‫you see that no new fetch requests were made.
‫But now if I keep writing,
‫so now we have more than three characters,
‫then we had our first HTTP request to the API,
‫then we got these results, and if I type again
‫then you see we got another one.
‫And now when I delete all this
‫then it simply goes back to empty.
‫So we deleted all the movies from our state, basically.
‫Okay, and so with this,
‫we have the basic functionality already implemented.
‫So let's recap what we just did here
‫and what is going to happen
‫whenever we type a new query here.
‫So the query is of course a piece of state, right?
‫So that is pretty obvious.
‫And so we are referencing that query variable
‫a couple of times inside our effect here, right?
‫And so therefore, we then included this query variable
‫also in the dependency array of this effect.
‫And so now our use effect hook
‫is basically like an event handler
‫that is listening for the query to change.
‫And so then when it changes
‫the entire effect is executed again, which in our case means
‫that a new request is gonna be made to our movies API.
‫So again, this effect that we just wrote here
‫basically reacts to an update to this state variable,
‫which makes the entire effect basically reactive,
‫so reactive to that state.
‫But at the same time, our effect will also be still executed
‫during the initial render.
‫Just right now, that is the empty string,
‫which we just basically told our effect to ignore.
‫So let's write another amazing movie here.
‫And so as we save this now, and so as our application
‫first loads, it will immediately fetch the data right here.
‫And so indeed, as we just learned in the previous lecture,
‫this effect basically now runs on the initial render
‫and whenever the state variable here updates.
‫So it is synchronized with this variable here.
‫And as you see, this is really, really powerful
‫and can be used in all kinds of situations.
‫So make sure that you really understand
‫everything that we just did here,
‫as this was a really, really important lecture.
‫And then let's move on to the next video
‫where we will finally have the ability
‫to select one of these movies
‫so that we can then load some additional details
‫here into the right side.
‫So that's gonna be really, really fun.
‫And so I hope to see you there soon.