Optimizing Rendering Performance in React

you have a lot of components in your react app and you're passing props around from parents to children to lists and so on and everything seems to be working when it comes to the app logic but then you start to realize that the app becomes sluggish for some reason or maybe you use react devtools and notice how a lot of components get re-rendered for no reason in this video i'm going to show you how to fix exactly this issue and we're going to learn a lot about optimizations in react if you're curious let's get started all right guys before we dive deep into code and start optimizing our app i would actually suggest going to react documentation to see what they actually recommend us when it comes to optimizations so in the docs under advanced guides we have this section called optimizing performance and there they give different techniques on what to pay attention to when it comes to optimizations and this section is what we're going to be focusing on how does react re-render its children and how does it decide to do so i would actually suggest going through this content to be familiar with it now going back to our example lab i gotta say that it's unfortunately not performant we have this state in the parent and we're rendering three children boxes with input fields as soon as i start typing something it's gonna propagate back to the parent and update the state but look at these re-rendered numbers these are simply random numbers that i put there but as soon as i start typing in one of the boxes all three start changing it means they're being re-rendered to kind of prove that we need to have react devtools installed and i have it and i'm gonna go to the profiler in the profiler settings i'm gonna turn on this checkbox called highlight updates when components render and now it's going to give us a really nice representation so i start typing something as you can see all three boxes have highlighting it means they're the components is literally being re-rendered every time i type a letter so obviously that's not good why should other components get re-rendered when i'm typing only in one of them let's go to the code in the code our parent component is called app and it holds the state for three items that are being looped through the loop is here and we are creating an item component and passing different props to it such as key id value so id is here and we're also passing value and we're also passing a handler function as a prop in the item.js which is basically the child we have this rerender that i told you about but we also have this unchanged function which is going back to the parent and we then fire change value function which is basically updates the states with this set item values so there we map we look for the exact the same id that triggers the input change and we're updating its value pretty simple so far right so let's take a closer look at what's happening here so i'm gonna start changing the value in the middle box so as you can see the state also changed but apparently it triggers re-rendering in two adjacent boxes why why is one of the objects is changing and we are re-rendering all three objects meaning all three items here well one of the most common misconceptions about react is that it's not gonna re-render children unless these three props have not been changed in fact that's not true as long as the parent gets re-rendered it re-renders all of its children recursively so that's what's causing our performance issue to alleviate that we can use this memo function so we simply wrap our component in memo memo function simply memoizes this component memoizing means that it's going to remember what the previous prop was and if it didn't change then it's not going to re-render our item js and we imported it very simply and i think that should fix the problem let's go back to the app refresh and start typing again and hope that it works well i start typing example but you see that the components are still getting re-rendered something is wrong here i wonder why so it means one of these props still changed so the parent still changed one of these props but why it should have been memoized well let's dig deeper let's go to the profiler again and now turn on this thing under profiler and it's called record why each component we rendered while profiling very self-explanatory let's start recording and as we record i'm going to change the value in this middle box so i am editing and let's stop the recording and see what we have so we have these three boxes that have been changed so let's start from the middle box what why did this re render so props changed value obviously i changed the value all right makes sense and on change let's look at the first box props changed on change that doesn't look right and the same here so going back to the code it seems like this unchanged prop got updated although these two guys are fine so let me explain why when the state in the parent gets updated react recreates the whole component basically it re-renders it and whenever it gets re-rendered this changed value function gets recreated so imagine it's recreated how does the child know that this is the same function that was passed before the re-rendering it doesn't that's why we need to make sure that it somehow stays in the memory well not literally in the memory but keeps the same reference well for that we can use the hook called use callback it works very similar to memoizing so use memo although it doesn't work with usual props but it works with functions so i'm gonna import use callback now and what we do is we simply wrap our change value function with use callback okay something is wrong there's a yellow underline let's see did you forget to pass an array of dependencies well apparently use callback works very similar to use effect so it expects an array of dependencies in our case we don't have any dependencies we simply wanted to kind of memo as the function so we pass an empty array and now let's get back to our app and we're gonna be typing again but first clear the console and let's change one of the boxes and editing and as you can see the re-render numbers are not changing and also there's no outline in other boxes meaning react devtools does not recognize any re-renderings anymore and that was it i hope you enjoyed the video and if you did please give this video a like it's going to help me a lot and if you are interested in optimizing your javascript code as a whole and you want to find memory leaks in your abs make sure to check this video out it's gonna be interesting i promise

Channel: Software Developer Diaries

Views: 69,974

Keywords: software development, software developer, programming, software engineering, javascript, web development, coding, react code optimization, react app optimization, react rendering, react performance improvements, react improve performance, react performance profiling, react optimization explained, react memo, react usecallback, react usecallback vs usememo, react rendering process, how to improve react app performance

Id: tbBILjDgXb4

Length: 7min 49sec (469 seconds)

Published: Sun Aug 21 2022