‫Let's now load some data
‫into a React application for the very first time.
‫However, in this lecture,
‫let's start by doing it the wrong way basically,
‫which is going to be a great learning experience.
‫So in this section,
‫we are going to go back to our usePopcorn application
‫that we have been working on before.
‫And so let's now grab the project folder
‫and open it back up in VS code.
‫All right, now here
‫let's start by actually duplicating this file
‫and then I'm gonna rename one of them to app version one.
‫And so by doing this, we are not going to override the code
‫that we have written before.
‫And so you can keep it as a reference.
‫Now, as we have learned before in the previous section,
‫we should never update state in render logic, right?
‫But now in this lecture, let's actually break that rule
‫so that we can see
‫why it actually exists in the first place.
‫And breaking rules like this
‫is actually a pretty great way of learning Reacts
‫and also its rules even better.
‫Now, the idea here is to fetch some movie data
‫as soon as the app component here
‫mounts for the very first time,
‫so as soon as it has its initial render.
‫So to fetch that data, we use the OMDb API,
‫which is basically like an open version of IMDB.
‫Now to get started, you need to get your own API key,
‫which you can get for free just by clicking here
‫and then filling out this form.
‫And so immediately you will then get your free API key.
‫Now then once you have that, you can just come back here
‫to the main page so we can see how we can use this API.
‫So our data requests should simply be sent to this URL.
‫So just copy that.
‫And then here, let's fetch the data using the fetch API.
‫So using the fetch function like this.
‫Now, right.
‫Now, in case you're not familiar with the fetch function
‫and on how to work with asynchronous JavaScript,
‫then please go back to the beginning of the course
‫and take a look at the JavaScript review section
‫where I talk about all that in great length.
‫But anyway here now of course
‫you need to place your own key.
‫And actually I want to do this,
‫so I want to place this key in a separate variable.
‫So let's define that out here.
‫So key and by now, after that long previous section
‫you know why we should actually define a variable like this
‫outside the component function.
‫And the reason for that is that each time
‫the component gets re-rendered
‫this entire function here will be executed again.
‫So basically all the render logic.
‫And so if this variable definition here
‫is part of that render logic
‫it'll also be recreated each time data component renders,
‫which is in this case, of course, not a big deal
‫but it's good to already get
‫into the habit of not doing that.
‫So when you're just defining a variable like this
‫that doesn't depend on anything that's inside the component,
‫then just declare it outside.
‫Now I'm just getting my own API key,
‫but of course you should use your own one here.
‫And now let's go back to the documentation page
‫where we can see that we can query the API in two ways.
‫So we can search for an ID or a title
‫or we can actually search by some query string.
‫And so that's actually what we will do here.
‫So here let's use S and then equal.
‫And then here you can type your favorite movie,
‫which for me probably is "Interstellar".
‫Not 100% sure of that, but it's definitely a great one.
‫Okay.
‫But anyway, now we need to handle the promise
‫that the fetch function here returns inside.
‫And of course here it's then, so inside a then method,
‫which gets access to the response
‫and then here we can convert that response
‫to Json immediately, which will return another promise.
‫And so we chain on another then
‫and then here we get access to the data,
‫which we can then for now log to the console.
‫And for now, that's actually it.
‫So let's see what we get here.
‫Or of course we first need to
‫actually start our application.
‫So make sure you are in the right project folder here
‫and then type npm start.
‫So that should then open up the new tab here.
‫And indeed, there it is.
‫So let's check out our console
‫and let's just reload quickly.
‫And indeed you see that React was able
‫to fetch the data from the API.
‫So we are just interested in the search here.
‫And so all the movies here are in fact about "Interstellar",
‫which means that our query here is already working.
‫Now as we learned in the previous section,
‫this data fetching that we're doing right here is actually
‫introducing a side effect into the component's render logic.
‫So it is clearly an interaction with the outside world,
‫which should never be allowed in render logic.
‫So again, all this code that is here
‫at the top level of the function is of course
‫code that will run as the component first mounts
‫and therefore it is called render logic.
‫And so again, here we should have no side effects.
‫I mean, in this example
‫where we only log something to the console,
‫it actually appears to work just fine,
‫but watch what happens if we set some state here.
‫And to do that
‫let's actually first get rid of our temporary data here.
‫So this movie data and watched data
‫we only used as a template for the previous section,
‫but now let's get rid of that.
‫And so as I was just saying,
‫let's now here actually set state.
‫So that list of movies that we get from the API
‫we now want to get it into our movie state.
‫And so that's at data.search.
‫Give it a save and beautiful.
‫So we got some data from the API now showing up in our UI,
‫but watch what happens when we check out the network tab.
‫So you see that it's basically running
‫an infinite number of requests here, so it keeps going
‫and it never really stops.
‫So every second our app is firing off
‫multiple fetch requests to this API,
‫which of course is a really, really bad idea.
‫So why do you think that is?
‫Why do you think all these fetch requests
‫are being fired off?
‫Well, the reason is that setting the state here
‫in the render logic will then immediately
‫cause the component to re-render itself again.
‫So that's just how state works, right?
‫However, as the component is re-rendered,
‫the function here of course is executed again,
‫which then will fetch again,
‫which in turn will set the movies again as well.
‫And then this whole thing starts over and over again.
‫So as the state instead the component is re-rendered again,
‫which then will fetch again,
‫which will set the movies again.
‫And so this really is an infinite loop of state setting
‫and then the component re-rendering.
‫And so this is the reason why
‫it is really not allowed to set state in render logic.
‫So let's quickly set this back here
‫so that we don't have a million requests here.
‫And so as we reload, then it stops.
‫And let's just see another example here quickly.
‫So let's say we did set watched immediately here
‫in the top level code to some empty array
‫and then actually we do get a real error.
‫I mean, let's reload that.
‫And yeah, here we are now reloading all the time again
‫the data from the API.
‫But what matters here is that
‫we get the error of too many re-renders.
‫And so that's now because of this state setting right here.
‫So if we're really setting the state here in the top level
‫even without being inside a then handler
‫then immediately React will complain
‫that there are too many renders,
‫which means that we again entered that infinite loop
‫where updating state will cause a component to re-render,
‫which will cause the state to be set
‫and so on into infinity.
‫So let's of course get rid of that.
‫Let's reload here.
‫And so now we are again good.
‫However, we do actually want to set the state here.
‫So we do want set movies here,
‫but without all the problems that we just saw.
‫And so how can we do that?
‫Well, that's where we need the use effect hook
‫which we will learn about in the next lecture.