‫In this lecture, we're gonna quickly set up
‫yet another small project
‫just to demonstrate some of the things
‫that we just talked about, Useeffect.
‫And in our starter files, we actually have again,
‫the complete project already.
‫So come here to this folder, workout timer.
‫And then here, the starter already contains the entire code.
‫So let's just grab that, paste that here.
‫So this one is called the workout timer.
‫And then let's get that into our VS code.
‫And there we go.
‫And once again,
‫just like we did with our previous small project
‫let's start by checking how this project was created.
‫And as we see here from this react scripts,
‫it means that this project was again
‫created with Create-React-App.
‫And so let's open up our terminal and run or start command.
‫So if it was with vite, then it would be npm run dev right?
‫However, we forgot that first we need to actually install
‫the dependencies.
‫So npm install,
‫because of course whenever you get a new project code
‫from somewhere,
‫it never comes with the node modules folder.
‫So you'll always have to install that yourself
‫and now that that's done, let's run NPM start.
‫And this always takes a lot of time,
‫loading up the project for the first time
‫and this time is it was actually fast
‫but sometimes it is a bit slow.
‫And so that's one of the advantages of using vite.
‫Okay, now the first thing that I usually like to do,
‫in order to get myself familiar with a new project
‫is to just check out the componentry
‫with this dev tool right here.
‫So we see that all we have is this app component,
‫the toggle sounds component up there
‫and this calculator.
‫All right?
‫And then of course we need to go check out the code as well.
‫And so that is actually my challenge for you
‫in this lecture.
‫So just like before in that block application,
‫I want you to get familiar
‫with this small code base right here
‫and really understand how this application works
‫and what it does.
‫And then on top of that,
‫I want you to use our profiler tool here on your own
‫in order to identify a potential performance problem
‫that you can then fix.
‫So again, try to find a performance issue
‫in this application
‫according to what we learned in this section.
‫Now, this performance issue
‫is not really affecting this application visually,
‫but as an example
‫we can still fix that here
‫so that you can practice the tools
‫that we have learned in this section.
‫So in particular, the memo
‫usecallback and usememohooks now, right?
‫So take a few minutes now,
‫analyze the components that we have
‫and then try to find
‫and optimize that small problem.
‫And I see you back here once you're finished.
‫Okay, so did you find that small performance issue
‫that I was talking about?
‫Well, to show you
‫all we have to do is to just start profiling
‫then wait a few seconds without even clicking anywhere here
‫and then we just stop it.
‫And so what we see then immediately
‫is that we had eight renders
‫where in each of them
‫all of the components got re-rendered.
‫So for some reason the toggle is only appearing in this one,
‫but this component is also being re-rendered
‫every single time.
‫And so the reason for these eight re-renders
‫is as you might have noticed here,
‫that this small clock,
‫makes this app component re-render every single second.
‫So that is coming here from this useeffect.
‫So here we are setting a timer that runs once a second
‫and which sets the time state to the current time.
‫And so this means that this component
‫so the app component is re-rendered every single second.
‫And as a consequence
‫both its child components will be re-rendered as well.
‫So this was the issue that I wanted you to find
‫and then to fix.
‫And so let's now fix it.
‫And again, just note that
‫maybe in the real world application,
‫we would not have to fix this
‫unless one of these child components
‫are of course really slow and heavy components.
‫But anyway, here we are just learning.
‫So again, we want to practice those tools
‫and so let's now open up
‫the calculator and the toggle sounds components.
‫Alright, so what can we do about this performance issue?
‫Well, if it is some children components
‫that are re-rendering,
‫just because the parent component is re-rendering,
‫then the solution is to memorize those components.
‫Right?
‫Now remember how earlier we memorized a component
‫by basically creating a new variable here,
‫like toggle sounds
‫and then we would wrap this function into memo.
‫However since here,
‫we are actually exporting these components,
‫It's a lot easier and nicer to just memorize down here.
‫So let me show you what I mean by that.
‫So we can just export basically the results
‫of memorizing this component.
‫And so this again, is a lot better
‫than creating a new separate variable here
‫which makes the code look a little bit weird.
‫Okay, so let's do the same thing here.
‫So memo and there we go.
‫Now do you think, or did you even experience
‫during the challenge that this already fixes the problem?
‫Well, let's see.
‫So waiting again for a few seconds
‫and well, not really.
‫So the calculator is indeed still being re-rendered.
‫Let's see about the sound toggle.
‫So that one is never appearing.
‫And yeah, here in this flamegraph
‫we can see that this one is no longer re-rendering.
‫But again, the calculator component is always re-rendering.
‫So let's see what we can do.
‫So remember that the memo function only works
‫if the props that are being passed
‫are the same between renders.
‫So here in this toggle sounds component,
‫that is apparently the case.
‫So allowSound is just a primitive value
‫so it's just a boolean
‫and so therefore that doesn't change across renders.
‫And then the second prop is this setAllowSound function.
‫Now remember that the state setter function
‫from useState is actually stable.
‫So React guarantees that it doesn't change between renders.
‫And so this means
‫that these two props do not change between renders
‫and so therefore the toggle sounds component
‫does not re-render each time that the app re-renders.
‫So we successfully memoed or memorized this one.
‫Now about the calculator component.
‫The allowSounds of course also stays stable.
‫But now the other prop is the workouts object
‫or actually the array.
‫And so here is where we have the problem.
‫So since this is an array,
‫which is essentially just a JavaScript object
‫this array gets recreated on every single render.
‫And so therefore we now need to memorize this array
‫in order for the memorizing of the component to work.
‫So let's do that.
‫And it is useMemo,
‫because it's just a value and not a callback function.
‫So let's wrap that into useMemo.
‫And remember how here we need to pass in a function
‫which React will then call on the initial render.
‫And here, due to the nature of array functions
‫in JavaScript,
‫we actually need to create a function body
‫and then return this array from there.
‫So close that here,
‫but then we are missing the dependency array.
‫Okay, well apparently there's some other problem here.
‫Ah, like this. now, right?
‫Give it a safe.
‫And now here we already got the warning
‫but we don't want to read the warning.
‫So after the last lecture,
‫we want to actually now understand
‫what is missing here in this dependency array.
‫So remember how we just learned
‫that the dependency array needs to include
‫all reactive values that are used inside the function.
‫So inside the hook,
‫and we talked about useEffect in the previous lecture
‫but the same thing applies to useCallback and useMemo.
‫So our reactive values in this component
‫are of course these two state variables,
‫but also this partOfDay variable
‫because it depends on the time state.
‫So it is using a reactive value
‫and therefore this is also a reactive value.
‫And since we are using that value inside this array,
‫this means that we now need to include it
‫into the dependency array.
‫So partOfDay,
‫and now eselent is no longer complaining, all right?
‫And so this should actually fix it.
‫So let's try that again.
‫That should be enough and nice.
‫So now our calculator is also memorized, so that works
‫and yeah, that was basically the goal of this lecture.
‫Now there's just another small thing that we can do
‫which is about this function here.
‫So this function that is inside
‫the component body right here,
‫doesn't actually use any reactive value, right?
‫And so there's no need to recreate this function
‫on every render.
‫And so let's cut that and place it out here.
‫So another very small optimization
‫but yeah, we don't need to waste any resources
‫only to recreate this function when we don't need to to.
‫And with this, we actually wrap up this video.
‫And so next up
‫we will start working a bit on changing this application.
‫So it's already working just fine for the most part
‫but for example these buttons here don't do anything.
‫And so that's what we're gonna change next.