React’s “useMemo” Hook
React hooks are one of the mysteries within React to new programmers such as myself. With every tutorial or example of code that I encounter I notice these hooks and they only make me want to dig a little deeper. In researching their uses and implementations my curiosity only grows to better understand WHY they are used. My last blog was about the “useEffect” hook, which I found really interesting in itself. Today we will be going over the “useMemo” hook in React that I recently came across.
First what is useMemo? It is a React hook that helps us “memoize” components. What? come again? 🤔. Memoization is a computer science concept that aims to accelerate the performance of your application. Used on complexed functions where the result is cached to avoid repeating excessive calls to that complexed function. Below I will be demonstrating it’s usage in a simple understandable way.
We will start with a simple React app in the App.js file.
Here we have a simple counter and a “useState” hook that handles the state of the number. When the button is clicked it fires off on a function called “addHandler” that increments the state of “number” by 1….
Part of the life-cycle in a React component a re-render happens when an update is made. Now I will create another component to show how that too will be re-rendered within the App.js. This I will name “Child” as it is a “child” of the App component. To demonstrate how it works I will use the useEffect() hook so that it will re-render every time the component finishes rendering. Usually with a second dependency such as an empty array [] the useEffect() hook will only allow one initial rendering and none there after. Here I will not be implementing a second dependency for demonstration purposes.
Now I will import this into the App.js file and place it within the return to show that it too gets re-rendered when the state (number) is incremented….
Here I will import the useMemo() hook and wrap the entire “Child” component that I created. As you can see the the hook has a callback function that returns the Child component with a second dependency, an array [], like that of the useEffect() hook.
This memoizes the “Child” component so that it does not re-render even though the un-memoized “Child” component does as seen below….
BUT if i pass the state “number” into the empty array dependency the Memoized Render will update due to the dependency of the change being made within state.
As you can see this was just a very simple explanation of useMemo() hook use case. This hook is used usually for expensive operations such as a long for loop which definitely can hurt the performance. Taking an immense amount of time, processing, and memory. Potentially adding technical issues that in which useMemo() hook comes in and saves the day!! ::crowd cheers:: I hope this helped you in your React hook journey or at least gave a little insight as to what it can achieve using it. I still have ways to learn but it can only go up from here 🤓 Thanks for reading and have a great day!!
Below are a list of resources….
