Sink Deeper with Advanced Hooks pt. 1 (useRef and useMemo)

A couple weeks prior I wrote an article about React Hooks, specifically useState and useEffect Hooks. Today, I’m going to continue exploring React Hooks by reviewing and discussing a couple more Hooks. Heres a quick reminder about React Hooks, and why I love and use them daily.

  • React Hooks allow you to create and alter state in functional components. This eliminates the predicament on whether a component should be a class or functional component.

Here are a few more notes about React Hooks courtesy of the ReactJS Documentation.

There are 2 Hooks I will be discussing today. They are useRef and useMemo.

useRef

const refContainer = useRef(initialValue);

useRef returns a mutable object that will persist for the full lifetime of the component. useRef is similar to useState EXCEPT when the value of useRef is changed or altered the component will NOT re-render. This is ideal if you need to keep track of a value like a count. I’m going to show an example below.

With the way this file is currently set up, if I click the button, currentCount will increase, but our component will NOT re-render. Here’s a screenshot after I clicked the button 4 times. I’ll open my browser tools so you may see the changes to currentCount even though the page isn’t updating or re-rendering.

In the screenshot above, you will notice the value changing, but the page never re-renders. That is basically it for useRef!

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

According to the documentation, In React, memoization optimizes our components, avoiding complex re-rendering when it isn’t intended. You simply pass in a function and an array of inputs and useMemo will only recompute the memoized value when one of the inputs has changed. If you are defining a ton of variables in a function at render, it might make sense to memoize with useMemo. useMemo is about optimizing our components. Imagine this scenario, we have a function to add 1 + 1 called addOnes and return the sum in our component. Every time our component updates or re-renders, addOnes will be invoked and the return value we be 2. After the initial render, memoization will remember the value 2, and return the value 2 instead of completely running the function again. This will make the component faster and more efficient. useMemo is great if you need to render a huge list of items. Unless the list changes, useMemo only needs to load or fetch it once! Now I will show an example.

Let’s break down this simple example from above, and then I’ll show what my browser is currently rendering. I have an array of numbers in random order, but I want to render them from lowest to highest. There is no reason to waste memory or space sorting through my array of numbers if the array doesn’t change. You should notice the dependency array in line 9 similar to useEffect. Ensure to at least include an empty array in the dependency params to avoid an infinite loop. So basically, I’m using useMemo to sort my array of numbers efficiently. Here is a screenshot of what my browser displays when the above code is ran.

My numbers are displayed in a sorted fashion on the page and in the console.

That wraps it up with the two Hooks that were focused on in this article. I plan on continuing my breakdown of Hooks with more articles in the near future, so please check back! I hope you found this article helpful, and if you have any questions please feel free to reach out to me on LinkedIn or on my Portfolio site. You can also check out the first installment of my Hook articles here.

Have a great day!!

Sources:

Full Stack Software Engineer