Each component instance goes through a series of initialization steps when it's created. For example, it needs to set up data observation, mount the instance to the DOM, and so on. Along the way, it runs functions called lifecycle hooks, giving us the opportunity to add our own code at specific stages. In other words, you can run code in whichever stage of the component's lifecycle you need to.
For example, if you have a blog post component and need to fetch the post from an API, you can do so in the created lifecycle hook. Let me show you how you do that. I will create a blog post component. Let's assume that we get the ID of the post in a prop and we want to fetch the actual blog post.
from our API to set it to the data. Now we want to run code when the component is created. So we will use the created hook. The hooks are functions just like the data.
Inside the hook function, we have access to the component's instance through the this keyword. So we have the ID of the post we want to get in a prop. And let's assume that we are using Axios to make our AJAX call. We can make a call to the API URL slash the ID of the block post.
Then to get the response, we can make the created hook async, await the return of the call made by Axios, and set the response to a variable. Then we could set the blog post data property. equal to the post returned from the AJAX request. I think you get the idea.
Lifecycle hooks are a very powerful feature. I won't go deep into the theory, but if you are interested in learning more, check out the exclusive lesson we have on lifecycle hooks. You will find the link in the description of this video below. In the later lessons, we will do exercises on real-life components.
so you will get the chance to practice what you have learned so far and also see Lifecycle Hooks in action. Each component instance goes through a series of initialization steps when it's created. For example, it needs to set up data observation, mount the instance to the DOM, and so on. Along the way, it runs functions called lifecycle hooks, giving us the opportunity to add our own code at specific stages.
In other words, you can run code in whichever stage of the component's lifecycle you need to. For example, if you have a blog post component and need to fetch the post from an API, you can do so in the created lifecycle hook. Let me show you how you do that. I will create a blog post component.
Let's assume that we get the ID of the post in a prop and we want to fetch the actual blog post. from our API to set it to the data. Now we want to run code when the component is created. So we will use the created hook.
The hooks are functions just like the data. Inside the hook function, we have access to the component's instance through the this keyword. So we have the ID of the post we want to get in a prop. And let's assume that we are using Axios to make our AJAX call.
We can make a call to the API URL slash the ID of the block post. Then to get the response, we can make the created hook async, await the return of the call made by Axios, and set the response to a variable. Then we could set the blog post data property. equal to the post returned from the AJAX request.
I think you get the idea. Lifecycle hooks are a very powerful feature. I won't go deep into the theory, but if you are interested in learning more, check out the exclusive lesson we have on lifecycle hooks. You will find the link in the description of this video below.
In the later lessons, we will do exercises on real-life components. so you will get the chance to practice what you have learned so far and also see Lifecycle Hooks in action.