‫Let's finish this section
‫with the three most important lifecycle methods,
‫which our component did mount, component did update,
‫and component will unmount.
‫And we are going to use these lifecycle methods
‫to implement two more features into our application.
‫So first of all, we want to search for weather as we type.
‫So for example, as I keep typing
‫it will then search basically for different locations
‫until I arrive at something that I want.
‫So notice that we don't have
‫the search weather button here anymore,
‫but instead, each time that I type,
‫a new search will be fired off.
‫So that's one of the features,
‫and the other one is as I reload the page now,
‫then you see that we get the exact same location
‫that we had before.
‫And so, that's because we store this location here
‫in local storage
‫each time that we type a new location in here.
‫So, let's now use lifecycle methods
‫to implement these two features.
‫So, lifecycle methods are essentially special methods
‫that all React components get access to,
‫and which we can use to run side effects
‫at different points of the component lifecycle.
‫And the most important points of the lifecycle are mounting,
‫re-rendering, and unmounting of the component.
‫So we already talked about these before
‫when we first talked about the use effect hook.
‫Right?
‫Now, the lifecycle methods are not exactly the same thing
‫as the use effect hook in function components;
‫but they are the closest similar thing that we have
‫in class components.
‫And so let's now start with the component did mount method.
‫So let's just specify that one here.
‫So component did mount,
‫and so this is really just another method.
‫And as the name of the method says,
‫this one is called immediately after rendering.
‫So basically, after the dom has been created,
‫just like a use effect hook with the empty dependency array.
‫And so this is the ideal place to perform
‫some initial side effects as the component loads.
‫So what we can do here, as the component renders,
‫and first mounts, is to call our fetch weather method.
‫Okay? And so what this will do
‫is that as soon as the app is loaded
‫it'll immediately start fetching for the weather.
‫And indeed, that's exactly what happened here.
‫Now this only works because we have Lisbon here
‫as a predefined location string,
‫but this is just to demonstrate
‫how this lifecycle method here works.
‫So again, this is not exactly the same
‫as the use effect hook, but the closest thing
‫that we can imagine this being is a use effect
‫with the empty dependency array.
‫So only running on mount but not on re-renders.
‫Okay, but speaking of re-renders
‫of course we also have a lifecycle method for that event.
‫And so that one is called component did update.
‫All right?
‫Now what's special about this method
‫is that React actually gives it access
‫to the previous state and the previous props.
‫So the first argument is the previous props
‫and the second one is the previous state.
‫And so this is then a bit similar to the use effect hook
‫with some variable here in the dependency array.
‫For example, we can now use these previous state
‫here to check if the location has changed.
‫And so, that's then similar to having a use effect
‫with location in the dependency array.
‫The difference is that this method right here
‫is not called on mount.
‫So really only on re-render,
‫while this use effect
‫would of course also be called on mount.
‫So, on the initial render.
‫So, as I was saying, we can now compare the current state
‫with the previous state.
‫So, this dot state dot location,
‫if it's different,
‫so if it has changed across renders,
‫then we can do something.
‫And of course we can also not do this comparison
‫and not even do anything
‫with this previous date or the previous props.
‫But in this case we actually need them,
‫because now what we want to do
‫is to again fetch the weather
‫in case that the new location
‫is different from the previous one.
‫And so this will then basically enable us to search
‫for the weather as we type.
‫So, you see it's already working.
‫So it's doing exactly the same thing
‫as before in our demo app.
‫Now, one downside that you can immediately see
‫is that our fetching logic here is now spread
‫across these two lifecycle methods.
‫So, fetching the weather on mount and also on re-render.
‫And so, then we need to call this function here
‫in two places.
‫Now that's not a big deal of course in the situation
‫but in real world applications,
‫this used to be really a big problem.
‫So, we used to have logic that belongs together
‫spread out over these different methods.
‫So, that then makes the code a lot harder to understand
‫and to use effect actually solved
‫some of these problems.
‫Again, because this one here.
‫So this effect like this would run both
‫on mount and on re-render.
‫But anyway, we can now remove this button here
‫as we now no longer need it.
‫Alright, what we can also remove
‫to make this a bit more real,
‫is of course this initial location.
‫But this will now give us a problem
‫because right now on the component mount
‫this will still attempt to fetch the weather;
‫even though right now we have no location.
‫And so actually, in this particular case,
‫it doesn't make any sense
‫to even fetch the weather as the component mounts.
‫So I will now remove this from here
‫but it was still important to understand initially
‫how this lifecycle method here works;
‫and we will actually need it again here in a minute.
‫But now let's just reload here,
‫and so then we don't get that error anymore,
‫but we still get now this error.
‫And first, that's because this one here doesn't exist.
‫But let's try that again.
‫And, so here, now the problem is
‫that there was no location found.
‫So this API only starts searching for something
‫if we have at least two characters in our string.
‫So, let's quickly fix that by coming here into this function
‫and we can just say if this dot state dot location
‫dot length is less than two, then just return.
‫So, then just don't do anything.
‫And so now, yeah, now that's fixed.
‫And again, as we keep typing, it'll then show us the weather
‫for those different locations.
‫Okay.
‫Great.
‫And now what we want to do is that feature where
‫it will remember our location in local storage.
‫So, how are we going to do that?
‫Well, basically each time that we type a new character here
‫we want to store the location into local storage.
‫And so then once again,
‫the component did update lifecycle method
‫is the perfect place for doing that.
‫So, besides fetching the weather,
‫we also want local storage dot set item.
‫Let's call this one location.
‫And then what we want to store there is
‫this, dot
‫state
‫dot location.
‫And since this is already a string,
‫we don't even need to convert it to a string.
‫And so,
‫now as we keep typing,
‫let's check out our
‫application tab here
‫with a bit more space,
‫and then indeed, here we have faro
‫in the local storage right now.
‫And so, all we have to do now
‫because right now of course we don't get that value yet.
‫And so what we have to do now is to read that value
‫from local storage as the component mounts.
‫And so the perfect place for that is again
‫or component did mount lifecycle method.
‫So, here we will want to set our state,
‫based on that data that's coming from local storage.
‫So this dot set state
‫and then remember it always needs to be an object here.
‫So with the location property,
‫and then simply local storage
‫dot get item
‫from the key of location.
‫Now, when we run this up for the first time
‫there won't be no local storage yet
‫at least not with this key.
‫And so let's then set a default off an empty string.
‫Okay? And there it is.
‫So, let's reload here and then that's working great.
‫So, let's just analyze what happens here.
‫So, as the component is mounted,
‫it will then read this value here
‫from local storage right here.
‫So, in this lifecycle method.
‫So, this then sets the state,
‫which will in turn re-render the component.
‫And so, then after that re-render,
‫the component did update method will get called.
‫And so that's where we then fetch the weather
‫because of course the new location will be different
‫than the previous one.
‫But if we copy this, for example,
‫and then just paste the same thing here,
‫then the new state is the same as the current one.
‫And so then nothing happened here.
‫Great. So this is how we work
‫with lifecycle methods in a very simple way.
‫So just again, some simple examples
‫but that's all we need right here.
‫And now to finish, let's just take one more minute to talk
‫about another lifecycle method
‫which is the component will unmount method.
‫So this one is a bit less important
‫but let's just mention it here as well.
‫Now this component,
‫so the app component will actually never unmount,
‫so it doesn't make sense to use it here.
‫So, let's do it here in the weather
‫because of course, this component will sometimes not exist.
‫So, when there is no string here
‫then there's also no weather component.
‫So, we can just then use component will unmount.
‫And so doing this is very similar
‫to returning a cleanup function from a effect function.
‫The difference is that this one really only runs
‫after the component unmounts,
‫so after it disappears and is destroyed,
‫not between renders.
‫So again, this lifecycle method is mostly used to clean up
‫after some effects, which in this case we don't really have,
‫and so there's not really any meaningful thing
‫that we can do here.
‫So, let's just log something through the console
‫just to show you.
‫So, weather will unmount,
‫or is unmounting,
‫it doesn't really matter.
‫All right?
‫So again, between renders, this is not running
‫so it's not doing anything.
‫But then well, nothing happens actually.
‫So our weather didn't even disappear
‫but that's just because we probably have some problem here.
‫So let's come back here
‫to the function where we fetch this data.
‫And so here, what we want to do instead
‫is to not only return,
‫but also just set the state to empty weather again.
‫Basically doing return this dot set state
‫and then the weather should basically be reset
‫to an empty object.
‫So, let's try that again.
‫Okay.
‫And then now we saw that the component disappeared
‫and so then the component will unmount method was called
‫and therefore we got this log here in our console.
‫And so, this again would be ideal
‫to clean up after some side effects that we created.
‫So not really the case here,
‫but now you know that this method exists
‫and that it's one of the three most important ones
‫I would say.
‫Now if we write again here component,
‫you see that there are many other lifecycle methods,
‫but these are not that important,
‫and so therefore we will not talk about that
‫here in this basically crash course of class components.
‫So, remember that the goal of this section
‫was not for you to really learn
‫how to write these class-based components on your own,
‫but more to understand how they work
‫and what they look like in case you ever come across
‫some of them in your work.
‫In case that company still maintains some old code base.
‫So, that's perfectly possible thing to happen.
‫And, so, I thought it was a good idea
‫to include this section here
‫so that you can be prepared for that possible future.
‫And now if you feel like it,
‫you could actually convert this entire application
‫back to function components.
‫So, I think that would be a really, really great exercise
‫for you to practice everything that we have learned
‫up until this point,
‫including understanding even better
‫how these class components work.
‫So, in case you do that,
‫I would really like to see your implementation.
‫So make sure that you paste something like a link
‫to a GitHub repo in the course Q and A after this lecture.
‫And so yeah, really looking forward to seeing that.
‫And then once you're done with that,
‫or even if you don't want to do it,
‫I hope to see you soon in the next section
‫which will be the beginning of part three of this course.
‫So, this is where we will finally enter
‫the advanced React part of this course.