Hello everyone and welcome back to another
react tutorial. In this video I will discuss the difference between useMemo and useCallback
and when to use each. In this tutorial, I'll clarify any confusion so you can
confidently use them in your project. Make sure to subscribe and press the bell icon so you won’t miss out on future
updates. Let's get started. Good performance can improve search engine
rankings, visitor retention, and conversions. To achieve an end goal, you need to apply memoization which is a technique
used to speed up programs. React knows it that's why it gives
us useCallback and useMemo to prevent unnecessary re-rendering and propagation in React. They both solve performance problems
but with different types of values. They both take in a function
and an array of dependencies. The first difference is useMemo memoizess
values while useCallback memoize the callback function itself.
Let me show you the example. Here I’ve Factorig Calculator
that find factors of a number. If I input 25 we get 1, 5, 25 factors of
the 25 and if I type 100 and here it gives us factors of 100 as well.
Let's take a look at code. Here I used state to manage the factors
and calculate them on input change, handleClearInput function to reset number state. Then I calculate factors using a loop
that iterates from 1 to specified number. Then we render all factors of number that we calculated. Also I’ve child
component Button to clear input. Button component is very flexible that accepts
all types of props from parent component. If user put numbers into input to find
factors then it’ll run the calculation but sometime we don’t need to perform this
calculation like suppose if inside component I’m running countdown let’s just suppose we
have countdown state to update and this state is changing every miliseconds then it would
cause performance problem becuase component would re-render on every state update
and re-run calculation and re-create functions again and again. Like if I have
multiple zeros here, it won't make sense to recalculate again if the number is same.
There we wanna skip the re-calculation and function re-creation. In that situation I wan
to memoize loop and handleClearInput function, because handleClearInput I'm passing it to my
child component. The question is which one: useMemo or useCallback?
Let's go further one by one. If your programs contain mathematical calculations
like this for loop here, that are time consuming you can optimize them with useMemo.
First I'll import it here useMemo, then I'll use it inside functional
component. Because useMemo accept function and dependencies so here I'll declare
const use the variable name factorize, useMemo takes callback function and it returns function,
close this curly braces dependency array and close parenthesis, also I'll return factors here. I'll
also need to pass this factorize variable here, and I'll also pass number as dependency array.
useMemo will execute the function and it'll then store the result of function execution that
are called inside of component functions. If its inputs are the same as its dependencies
have not changed means numbers are same, useMemo hook returns cached results. Now if I
clear it and put the number again this time 17 you'll see it's running fine but now it's memoize.
useCallback works exceptionally well with event handlers, especially when
dealing with child components. If I open dev tool you'll see our Button
component re-render 24 times even though I'm using memo. If you want to go deep down why?
Then check useCallback complete guide later. Basically useCallback creates a reference
of a function and then on each render, it returns the same function reference as
long as its dependencies have not changed. Let's import useCallback as well and then I will
wrap handleClearInput function with useCallback, an empty array and close parenthesis. Now in
browser if I clear it you will see we memoized the function successfully. 23 and here we are.
The second difference is useMemo optimize expensive calculation and useCallback
optimize function reference. Let's take a look at Impact
of both hooks on re-rendering useMemo does not directly control
component re-render itself, it plays a crucial role in optimizing
specific parts by memorizing the results. If a component relies on memoize value
and that value remains same due to useMemo that part won't re-render
even if the component itself does. usecallback main impact on re-rendering
is related to child components. usecallback simply ensures that the
child component does not re-render unnecessarily due to changes
in parent component's state. So simply use useMemo when you
want to avoid re-calculating a value and use useCallback when you
are dealing with callback functions or functions that need to maintain a
consistent reference across re-renders. I hope in today’s video you understand
these points the difference between both hooks and when to use them. I hope
you enjoyed this video please like, share and comment and follow me on
instagram. I’ll see you in the next one.
