Miguel Luis’ Post

Transcript

So I want to talk about the React hooks. Use memo, use callback. But what exactly are they? A lot of people mistakenly think that the same thing but they actually do 2 subtly different things. So I'm going to go over a few use cases and also when we should use one over the other. Introduce and React 16.8 folks allow you to use state and other react features without writing the class. Use memo and use callback at two hooks to help you optimize your components for better performance but to understand their benefits. You need to 1st understand the concept of rerendering and. React components rerender for various reasons, sometimes more often than necessary. This can lead to performance issues, especially in complex applications. That's where use memo and use callback come in, helping to prevent unnecessary re renders and computations. Let's start with use memo. This hook is all about memoization, which is like a fancy way to say cashing and React. It's a programming technique used to speed up applications by storing the results of. Special functions. Here's what they actually do. Use memo memorizes their result of a function or declaration. I emphasize the word result because this is significant, as you'll find out in a moment, and it only recalculates the result when one of its dependencies changes. You can see here while I'm running a very expensive calculation. What this is doing is emulating the slow function because it's looping around 10 million times and each time it does math, dot random is calculated in a new number. However, this calculation will not run all the time on every rerender. This is because they use memo hook only causes the calculation to happen once and it doesn't happen again until the value and the dependency array has changed. In this case I have a state variable called number and in my example app the state variable will only change. When I click on the button to recalculate, if I were to update, let's say, another state variable in this component, this entire component would rerender, and if it were not inside of this use memo, this calculation would rerender every time the final value of the calculation is being memoized or cached so that it doesn't need to recalculate again. I know the use case of use memo is when you don't want renders to happen in a component that's using an object. If a parent component is rendering, an object will be found and because of something. Of referential equality in JavaScript, the component will be checked and the object will be found to be different. This is because an object, even when comparing to an identical object with all the properties and values being the same, they will still not be equal to each other. This is always the case when it comes to both objects and arrays. What we can do is memorize the object and only update it based on a certain condition. A common use case is when your page is dependent on a theme with light mode or dark mode and you want to memorize a theme on every render. Unless they use their updates it in their settings, in which case they toggle their theme and a dependency array will see a new value causing the use memo with the object to rerender. Now you should know that there's an overhead cost to using use memo. It gets stored in memory which isn't too bad, but if you start using use memo all over the place and your application it could get costly. So the best case is a use it only when you need it, which is to memorize a much needed object or an array, or when you need to memorize the results. We're really slow function. Now let's go to use callback. Remember how I said use memo memorize as the result of a function? That is because use callback doesn't actually memorize the result of a function, but rather the function itself. This is useful not for stopping unnecessary calculations from recalculating, but rather from stopping the component from rerendering. Let's say you have a pair of component that renders, and your particular component that you're working with doesn't need to rerender at all. You even wrap your component in a React dot memo, so you memorize the entire. The opponent, but for some reason it actually does rerender. Then you find that the reason that it's rerendering is because the component contains a function. This goes back to the referential equality scenario that we talked about earlier. Like object and arrays, functions will always be considered different from each other. So when a parent component re renders, the child will be checked, a functioning will be found and it will be regarded as something different, and subsequently the child will be rendered even though that child is wrapped in a react dot memo. The way to solve this is the user use callback and like they use memo it takes a dependency array and in my case right here it is only run once on mount and now that this component is mounted into the Dom there is no reason for this component to render again. Hey thank you for watching and if you like content like this be sure to hit that subscribe button.