In this lesson, I'm going to introduce reacts lifecycle methods. But before I do that, let's do a quick recap. In the previous lesson, we hooked up our button to display a new joke every time it was clicked. But when our app first loads, our screen looks pretty bare. So I'm going to go ahead and add some new functionality that will fetch and display a joke right when the app loads up. So how do we do that?

For this, we'll be leveraging reacts component lifecycle methods. These methods provide hooks that allow you to execute your own logic when a corresponding event occurs in a component. In our case, we want to fetch a job before app component is rendered to the screen. This is a perfect use case for react component did mount lifecycle method. If we have a look at the official react docs, it says component did mount is invoked immediately after a component is mounted. And it also says if you need to load data from a remote endpoint, this is a good place to instantiate the network request, which is exactly what we were doing with our fetch joke.

So I think this is a perfect fit for our scenario. So let's go ahead and add a component did mount method to our app component Now we could just copy the contents of our untell Joe click handler into component did mount like so. And that would work fine. But it creates a whole lot of duplication, which isn't great. Instead, I'm going to copy this logic into a new method and call it fetch joke. And now I'll update both component did mount and on tell jokes to both call fetch joke instead.

With that change of joke is fetch when the app component mounts, which means if I refresh the page, I should see a joke rendered on the page right away. And there we go. When making asynchronous network requests, like our fetch Jo call, it's good to think about what a user sees while that request is loading. My connection is pretty fast. So the time between me clicking the joke button and actually seeing the joke is pretty quick. But what about those users on a slower connection?

What will they see? I'm going to go ahead and simulate a slower connection using Chrome Dev Tools. With a slow connection, you can see that the user has to wait quite a while before they see a joke appear on screen. And during that time, the user has no indication of what's going on. That doesn't make sense. A great user experience.

So let's go ahead and improve that. First thing I'm going to do is create a new state variable named is fetching joke. This will be used to track when a joke is being fetched. And by default, I'm gonna go ahead and set it to false. A joke will start fetching as soon as fetch joke is called. So I'm going to add a set state call right at the start this method, and set is fetching job to true.

A job is considered done fetching when we receive a response from the job API, which happens right here. And since we're already calling set state here, I'm just going to go ahead and has its fetching job and set it to false. To test that it's working as expected, I'm going to render the value of his fetching job to screen. Since is fetching joke is a boolean value I'm going to call to string on it which will allow us to render the value of the screen. Now when I click the button, you can see that the is fetching value is set to true. And once the joke is returned, it's fetching goes back to false.

The first improvement I want to make is to have our job button disabled while joke is being fetched. This will prevent the user from clicking on the button again if we're already fetching a joke To get this working we'll use the buttons disabled attribute, and set the value equal to our new is fetching joke state value. Now whenever a joke is being fetched, the button will automatically be disabled, and then re enabled when fetching is complete. Another improvement we can make is adding better messaging for the user while a joke is being fetched. Currently, we still just show the old joke. Instead, I'd like to show a loading joke message for the user.

To accomplish this, we're going to use a conditional expression, the condition will be if it's fetching joke is true, then render the loading message. And if it's false, render the joke like we're doing now. While we're at it, let's go ahead and remove our is fetching joke label as we don't need it anymore. Okay, let's go ahead and test it out. Now we can see that whenever a joke is being fetched, we get this nice loading message that lets us know that something is happening. This is a big improvement for those users that may be using a slower connection and next up, we'll be looking at enhancing what we've done here by adding a form for our search.