‫We're gonna start this section
‫by getting a quick overview
‫of what can actually be optimized
‫in React applications and how we can do it.
‫So, there are three main areas that we can focus on
‫when we need to optimize performance of React apps.
‫First, we can try to prevent wasted renders.
‫Second, we can improve the overall app speed
‫and responsiveness to make sure
‫that the app is 100% fluid and without delays.
‫And third, we can reduce the bundle size.
‫So, let's quickly look at some built
‫in React tools for each of these areas.
‫So in order to prevent wasted renders,
‫we can memorize components with memo
‫or we can memorize objects
‫and functions with useMemo and useCallback hooks.
‫And of course, you don't know what any
‫of this means at this point
‫but we'll get to it over the next few lectures.
‫We can also use a technique where we pass elements
‫into other elements as children or as a normal prop
‫in order to prevent them from being re-rendered.
‫Now to improve the perceived up speed,
‫we can again use the use memo and use callback hooks
‫and we can also use the modern useTransition hook net.
‫Again, more about these later.
‫Finally, we can reduce the bundle size simply
‫by using fewer third-party packages in our code base
‫and we can also implement code splitting and lazy loading.
‫Now there is no need to use all these tools
‫and techniques all the time.
‫So, the main goal
‫of this section is to basically just give you access
‫to these tools so that you can have them
‫in your toolbox whenever a situation calls for one of them.
‫And throughout this section,
‫you will learn exactly when that is.
‫So in which situations you need each of these tools.
‫Also, keep in mind that this list
‫of tools and techniques is by no means exhaustive.
‫So there are many other optimization best practices
‫that I already told you
‫about before and that you are already using, for example,
‫not defining components inside other components.
‫And so I didn't include all of these in this list.
‫So, these are mainly tools that we will talk about
‫in this or in future sections.
‫Now the first part
‫of this section is gonna be about optimizing wasted renders.
‫However, to understand what wasted renders actually are,
‫we first need to review when exactly a component instance
‫gets re-rendered.
‫So, this will serve as a nice reminder
‫of how rendering works in practice.
‫So in React, a component instance only gets re-rendered
‫in three different situations.
‫First, when the component state changes.
‫Second, a component instance gets re-rendered
‫whenever there's a change in a context
‫that the component is subscribed to.
‫And this is exactly what we've learned
‫in the previous section.
‫And finally, as we learned in the section
‫on how React works behind the scenes, whenever
‫a component re-renders, all its child components
‫will automatically be re-rendered as well.
‫And so the third reason for a component
‫to re-render is a parent component re-rendering.
‫But now, you might be wondering what about prop changes?
‫Doesn't updating props also re-render a component?
‫Well, actually, that's technically not the case.
‫So, that's a common misconception.
‫And actually even I told you this
‫at the beginning of the course, but it was only
‫because you didn't know yet how rendering works.
‫Because it is true that it does look
‫as if components re-render when their props change.
‫But what actually happens is that props only change
‫when the parent re-renders
‫but when the parent re-renders,
‫the children who receives the prop will re-render anyway.
‫And so, the real reason why a component re-renders
‫when props change is that the parent has re-rendered.
‫Okay.
‫But anyway, it's important to also remember
‫that rendering a component does not mean
‫that the DOM actually gets updated, right?
‫So all that rendering means is
‫that the component function gets called
‫and that React will create a new virtual DOM
‫and to all the differing
‫and reconciliation that we have already talked about before.
‫And this can be an expensive and wasteful operation
‫which brings us to an important topic
‫of this video, wasted renders.
‫So, a wasted render is basically a render
‫that didn't produce any change in the DOM.
‫So, it's a waste because all the different calculations
‫still had to be done
‫but it didn't result in any new DOM.
‫And so therefore, all the calculations were for nothing.
‫Now, most of the time, this is actually no problem at all
‫because React is very fast.
‫However, it can become a problem when re-renders
‫happen way too frequently
‫or when the component is very slow in rendering.
‫And so, this can then make the application feel leggy
‫and unresponsive.
‫For example, not updating the UI fast enough
‫after the user performs a certain action.
‫So, we want to avoid situations like that at all costs.
‫So, that's basically what we're gonna be dealing with
‫in the next couple of videos.