When to useCallback & useMemo hooks ?
Performance is very common thing that every developer may faces at some point after building the application. We architect, code and build the system which run perfect in our system but when it goes for production or after we deploy the system it actually feels slower than that of development.
So why is development app feels faster than of production?
During development, all our files are hosted in our local machine or our own computer which is specifically in local port 3000(in React). It is very efficient and fast for us to download all of our bundles and files because we were just developing locally and the speed is really quick where the speed of the internet connection doesn’t real concerns. But in production internet comes the big issue especially if we are building applications for the country that have really slow internet connections.
Do not fall for tips and tricks!
“Performance optimization always comes with a cost but does not always come with benefit”
So, do not optimize your code ahead of time or before it really needs, don’t write performance code, and don’t fall for all the performance tips and tricks that we read all over the internet without proper reason to do so. We only optimize a code once there is a production or we really feel some line of code is making slow unless it is mandatory. We shouldn’t be eagerly optimizing our code and implementing what we read without necessary.
Why ?? Not to implement tricks
Your code might not be slow to begin the optimization. We will optimize the code by measuring it in the first place. If we don’t measure and start optimization stop doing it. Only perform optimization when you notice the application starts to slow down and you notice there is a problem. Before looking for the potential solution find out why it is slowing down.
Don’t over-optimize the application because when we optimize the code actually it makes slower. Optimizing the code means adding the lines of code where every line of code come with a cost.
useCallback | Hook
useCallback help to memoize the function that we wrap in.
In REACT when the parent component re-renders inside the parent, a child component also re-renders. At each re-render, the child component will re-execute its functions. Using the call-back function, the re-execute of the function will solve the issue.
Example 1.1:
As we can see in the above console the more we click the button, the component get re-renders and functions get called which is unnecessary and costly for us. So, to prevent this unnecessary calling of function, we memoize it.
Example 1.2 (After implementing callback)
As we can see in the console there is no more unnecessary re-render due to the help of useCallback hook.
useMemo | Hook
useMemo returns a memoized value.
It is suitable for processing a lot of data i.e. complex mathematical calculations or any complex task that takes time to calculate. First, it will do work at the first render and then on every re-render it displays the cached version rather than calculating the complex calculation again and again.
Example 2.1:
As we can see the unnecessary complex calculation is performed again and again which is costly if that function takes more than a second. So, to eliminate these unnecessary calculations we memoized the value with the help of useMemo.
Example 2.2:
As we can see… complexFunctions() is not being called because of useMemo hooks which are very efficient for complex calculations.
Thank you for reading.
