‫Let's now convert our effect to an async function
‫instead of the basic promise handling
‫that we're doing right now.
‫So, many times when we need a lot of code
‫to handle a promise,
‫it's a lot easier and nicer to just have an async function.
‫And here, I will just assume
‫that you already know what async await is.
‫So we might think that all we need to do
‫in order to use an async function
‫is to place the async keyword here,
‫and then use await inside of it.
‫However, we immediately get this warning from ESLint
‫which tells us that effect callbacks
‫are synchronous to prevent race conditions.
‫So basically the effect function
‫that we place into use effect cannot return a promise,
‫which is what an async function does.
‫So instead of doing it directly like this,
‫we just create a new function.
‫And then we place the async function in there.
‫So let's call this one fetchMovies.
‫And then let's of course adapt this function here,
‫to using the await keyword.
‫So const res equals await,
‫and again, I'm assuming that you already know
‫how all of this works.
‫So that converting to promises to an async function
‫is nothing new for you at this point.
‫So data will be the result
‫of converting the response to JSON,
‫which is again, an asynchronous operation.
‫And then, finally, we can set the movies to data.Search.
‫So just what we had here.
‫All right.
‫But now of course nothing is happening,
‫because nowhere we are calling this function.
‫So that's also why this gets this yellow underline here.
‫So our effect is now this function right here.
‫But this function, all it's doing right now,
‫is to define yet another function.
‫So this async fetchMovies.
‫And so then at the end, we just call it,
‫and then it is back to working.
‫Now here, I just want to extract this here
‫for now into another variable,
‫which I'm going to call query.
‫And this is just temporary here.
‫Now, okay.
‫And now what I also want to do is to log our movies here.
‫So the movies that we received from the API to the console,
‫just so I can show you something.
‫Let's first reload to get rid of the arrows there.
‫And now what I want to do here, again,
‫is to log our movies to the console.
‫So, do you think that I can just do this?
‫So you think that this is going to work?
‫Well, let's see.
‫And let's reload to actually see the truer result,
‫which is an empty array.
‫So why is this happening?
‫Well, hopefully you learned in the previous section
‫that setting state is asynchronous.
‫So in other words, after the state
‫has been set here in this line of code,
‫or actually after we instructed React to set the state,
‫that doesn't mean that this happens immediately.
‫So instead, it will happen
‫after this function here has been called.
‫And so right here in this line of code, we have stale state
‫which basically means that we still have the old value
‫as the state was before.
‫And in this case, before, it was just the empty array.
‫So our initial state.
‫So here we can basically then use data.Search again.
‫And so, as we reload now, then we get here the output.
‫Now what I wanted to talk about
‫is why we always have these two outputs.
‫So, basically why we have these two requests here happening.
‫Well, the reason for that is React's strict mode.
‫So when strict mode is activated in React 18,
‫our effects will not run only once, but actually twice.
‫So React will call our effects twice
‫but only in development.
‫So when our application is in production,
‫this will no longer be happening.
‫And so this is just so that React can identify
‫if there are any problems with our effects.
‫So if we come here quickly just to index.JS
‫and if we remove the strict mode from here,
‫well then we have this problem.
‫Let's actually remove the code.
‫Let's save and let's reload.
‫And then you see that we only get one output here,
‫which means that there was only one HTTP request.
‫So the effect was only called once indeed.
‫But let's put it back
‫because this is somehow a bit safer.
‫Now, okay, and that's it for this video.
‫Next up, let's make this data fetching here
‫a bit more complete with a loading state.