‫So let's now learn about the next important tool
‫in our React toolbox, which is the useEffect hook.
‫So we already know about the useState hook,
‫and so now it's time for our second hook,
‫which is again, the useEffect hook.
‫Now, the idea of the useEffect hook is to give us a place
‫where we can safely write side effects like this one.
‫Just, again, like our data fetching.
‫But the side effects registered with the useEffect hook
‫will only be executed after certain renders.
‫For example, only write after the initial render,
‫which is exactly what we are looking for in this situation.
‫Now, we will learn all about what this hook actually is,
‫but for now, let's just use it in practice.
‫So just like with useState, we just write useEffect,
‫and then we also need to make sure
‫that it has been imported automatically here from React.
‫So just like useState, again,
‫this is also a function that is part of React,
‫and so therefore that we need to import.
‫Now, the use effect doesn't return anything
‫so we don't store the result into any variable,
‫but instead we pass in a function.
‫And so this function is then called our effect,
‫and it contains the code that we want to run
‫as a side effect.
‫So basically that we want to register as a side effect
‫to be executed at a certain point in time.
‫So let's paste that here, but we are actually not done yet,
‫because now we need to pass in a second argument,
‫which is the so-called dependency array.
‫Now, this dependency array is actually
‫the most confusing part of this hook, and we will, again,
‫learn all about this throughout this section.
‫But for now, what you need to do here
‫is to just pass in this empty array,
‫which means that the effect that we just specified here
‫will only run on mount.
‫So it'll only run when this app component here
‫renders for the very first time.
‫And so now, here, let's change this back to setMovies,
‫give it a safe, and yeah, our movies here
‫are in the user interface, but even more importantly,
‫let's check if the problem from before has been solved.
‫And indeed, now we have no more infinite loops here
‫and no more infinite requests to our API.
‫So the problem that we created in the previous lecture
‫has indeed been fixed.
‫And so now our effect is only running
‫as the component mounts.
‫Great, and so this is basically the very bare bones way
‫in which we do data fetching in simple React applications
‫like this one, at least if we want to fetch our data
‫as soon as the application loads.
‫Now, in a larger, more real world application,
‫we may use some external library for data fetching.
‫But again, in a small application like this one,
‫this is now a great way to fetch some data on mount,
‫so when our application first loads.
‫So let's just quickly recap here.
‫So we used the useEffect hook to register an effect.
‫And so that effect is this function right here,
‫which contains the side effect that we want to register.
‫And basically, register means that we want this code here
‫not to run as the component renders,
‫but actually after it has been painted onto the screen.
‫And so that's exactly what useEffect does.
‫So while before, the code was executed
‫while the component was rendering,
‫so while the function was being executed,
‫now this effect will actually be executed after render.
‫And so that's a lot better.
‫Then, as a second argument,
‫we passed this empty array here into useEffect.
‫And so this means that this effect will only be executed
‫as the component first mounts.
‫Okay, and that's actually it.
‫So this is how we use the useEffect hook in practice
‫in a simple situation like this.
‫And so next up, let's now take a bit of a closer look
‫at this new hook.