In this video, I'll give you a brief introduction to what functional components are. Let's start by looking at the official docs. As you can see, this section is hard to find, so if you never stumbled over it so far, that is understandable. Render functions, as a concept, is something we'll be looking at closer as part of this course, as functional components play nice with these.
So, what are functional components? It's a component that is stateless, so there's no this context or reactive data available. This does not mean that the components themselves are not reactives. Data you pass down as a prop will still re-render the component correctly.
So think of them as less powerful components, but much slimmer. Why you should still use them, I want to show you in an example. Here we have a component that displays asteroid data. We require a JSON file that has all the asteroid data and we just render the component for each asteroid accordingly.
So, as we have 1000 datasets, we render these components 1000 times. Let's look at this in the browser. We see all the data rendered on screen for us. As you can see, currently these functions don't do more than display data.
A perfect candidate to use a functional component. The functional part is that the component itself can be treated as a pure function that will generate certain output every time it's invoked. That means if we pass in data, it will generate the output once. Should data from the outside change, it will generate the new output.
Due to its functional nature, these components are quite fast though, so they can improve the performance of your application. Here we render one component multiple times on the same page. And just imagine we could avoid loading the whole reactivity system every time it is rendered. So let's make a test and see how much faster a functional component could be here.
To track time of pure rendering, we'll make use of View's lifecycle methods and the time function. We're going to use the created function and the mounted function. We use created to start tracking time and we use mounted to end the time tracking. This will give us a good overview of how long it actually takes to render all children.
Let's check out the results in the browser. I'll pop open the console and see what happens. Okay, we see one time here for rendering. Let's run it like a few times to see what number we get, actually.
We see it's consistently around 120 milliseconds. So let's switch the component to a functional one that I've prepared already. To load the functional component, I just have to add the dash functional to the filename, as I have both components prepared here. Let's look at the rendering times again.
I re-ren the whole rendering a few times. And as we see in the console, there's quite a difference with the same outcome. We seem to consistently get times around 80 milliseconds, so we cut down the rendering time by around 40%. Very often in our applications, we have components like this.
They only need to render information and we do not need the whole reactivity system around them. Over the rest of this course, you'll learn how to use functional components and unlock these easy performance wins that will even lead to cleaner results eventually. In this video, I'll give you a brief introduction to what functional components are. Let's start by looking at the official docs.
As you can see, this section is hard to find, so if you never stumbled over it so far, that is understandable. Render functions, as a concept, is something we'll be looking at closer as part of this course, as functional components play nice with these. So, what are functional components? It's a component that is stateless, so there's no this context or reactive data available.
This does not mean that the components themselves are not reactives. Data you pass down as a prop will still re-render the component correctly. So think of them as less powerful components, but much slimmer. Why you should still use them, I want to show you in an example.
Here we have a component that displays asteroid data. We require a JSON file that has all the asteroid data and we just render the component for each asteroid accordingly. So, as we have 1000 datasets, we render these components 1000 times. Let's look at this in the browser.
We see all the data rendered on screen for us. As you can see, currently these functions don't do more than display data. A perfect candidate to use a functional component. The functional part is that the component itself can be treated as a pure function that will generate certain output every time it's invoked.
That means if we pass in data, it will generate the output once. Should data from the outside change, it will generate the new output. Due to its functional nature, these components are quite fast though, so they can improve the performance of your application. Here we render one component multiple times on the same page.
And just imagine we could avoid loading the whole reactivity system every time it is rendered. So let's make a test and see how much faster a functional component could be here. To track time of pure rendering, we'll make use of View's lifecycle methods and the time function. We're going to use the created function and the mounted function.
We use created to start tracking time and we use mounted to end the time tracking. This will give us a good overview of how long it actually takes to render all children. Let's check out the results in the browser. I'll pop open the console and see what happens.
Okay, we see one time here for rendering. Let's run it like a few times to see what number we get, actually. We see it's consistently around 120 milliseconds. So let's switch the component to a functional one that I've prepared already.
To load the functional component, I just have to add the dash functional to the filename, as I have both components prepared here. Let's look at the rendering times again. I re-ren the whole rendering a few times. And as we see in the console, there's quite a difference with the same outcome.
We seem to consistently get times around 80 milliseconds, so we cut down the rendering time by around 40%. Very often in our applications, we have components like this. They only need to render information and we do not need the whole reactivity system around them. Over the rest of this course, you'll learn how to use functional components and unlock these easy performance wins that will even lead to cleaner results eventually.