React.memo() Improper usage and how to correct it
Improve application performance after proper usage of React.memo(), useMemo() and useCallback() together.
In React we have two types of components, one is class components and another is functional components. Till hooks were not published officially, only Class components had privilege's to enhance their performance using PureComponent. However, functional components were re-rendered whenever the parent component is re-rendered, irrespective of if its props are changed or not. That was always an overhead on render cycle.
Some time before, React has come up with an option to use React.memo() for functional components which would help them achieve the behavior of PureComponent.
React Memo vs. PureComponent
React Memo is a higher-order component that wraps around functional components and improves their performance by memoizing them.
In this sense, it’s the solution for functional components that React.PureComponent provides for class-based components.
Comparatively, each feature would be superficially introduced to their components, as seen below:
// PureComponent Class Based:
class Count extends React.PureComponent { }Versus:
// React.Memo Functional Component:
const App = ({}) => {}
export default React.memo(App)Above I have shown you, how we can memoize our component re-renderings. Now on more deeper level, as your application grows, performance issues become more and more frequent. Lets now think within the component, the props that you pass to child component also leads to re-rendering of child component. I do say React is very well optimized and fast out-of-box thats why it is important to know the instruments it provides to make your code even faster. One of such instruments is React.useMemo hook and its sidekick, React.useCallback.
REAL LIFE EXAMPLE WHERE WE ABNORMALLY RE-RENDERS OUR CHILD COMPONENTS
1- When you pass object/functions to your child component without memoising the object.
2 — When you pass the children as JSX rather than a simple string
In both the above use cases, We are abnormally re-rendering our child component. And in order to avoid such scenarios, we have hooks/HOFs(useMemo and useCallback).
What is useMemo?
UseMemo is one of the hooks offered by React. This hook allows developers to cache the value of a variable along with a dependency list. If any variables in this dependency list changes, React will re-run the processing for this data and re-cache it. If the variable values in the dependency list have already been cached before, React takes the value from the cache.
This mostly has an effect on re-renders of components. Once the component re-renders, it will fetch the value from the cache instead of having to loop through an array or process data again and again.
What is useCallback?
I often noticed that a lot of people are confused with useCallback. useCallback is pretty much the same as useMemo, but for functions. In fact, useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). useCallback is supposed to speed up the app when using a lof of callback functions by not redeclaring them unless the dependencies change.
Now as we understood useMemo(), useCallback() and React.memo(), so we can now think of replacing the above code with the below one.
Key take-aways
We can all agree, useMemo and useCallback can be useful to avoid unnecessary re-renders, by keeping the same object reference of a variable.
These below points we should always remember:-
- useMemo and useCallback should be used when there is a high amount of processing
- The threshold from when useMemo becomes interesting for avoiding extra processing highly depends on your application
- Using useMemo/useCallback in cases with very low processing, there can be extra overhead for its usage. This is the main reason behind React not internally providing memoisation for each and every child component.
Thank you for reading, I hope you enjoyed it. Let me know what you think about useMemo, useCallback and React.memo()in the comments.
Happy coding!!!