When to useCallback and useMemo

Photo by Vishal Jadhav on Unsplash

What’s web performance?

Web performance refers to how quickly site content loads and renders in a web browser, and how well it responds to user interaction.

Why be concerned with performance?

Good or bad website performance may affect both user experience and the overall performance of most sites. That’s why you should be concerned about it.

In this article, you will learn how to improve web performance through the Memoization technique by learning about the difference between useMemo and useCallack as two important hooks within the React context. The slight difference between useMemo and useCallack will be revealed in the subsequent sections.

What’s Memoization?

Memoization or Memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

Hooks are new additions in React 16.8. Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes, they let you use React without classes.

You must follow these rules when using them:

1. Only Call Hooks at the Top Level: Don’t call Hooks inside loops, conditions, or nested functions.
2. Only Call Hooks from React Functions: Don’t call Hooks from regular JavaScript functions.

What’s useMemo?

The problem without using useMemo

Let’s have a look at this scenario to understand why useMemo is important. If you click on the buttonIncrement, the state countwill be incremented, the App component will be rendered and the code in the useEffect will be called.

But what we want is to invoke the code in useEffect only when the value of the array filterMarks has changed.

What’s the problem?

The variable filterMarks is an array. Since a new array is declared with each render, JavaScript assumes that filterMarks has changed. As a result, it will invoke the render APP effect for each render.

How to solve this problem?

The Hook that The React team has offered to avoid these extra renders for this case was useMemo.

useMemo is a built-in React hook that accepts 2 arguments; a function compute that computes a result and the depedencies array.

useMemo

During initial rendering, useMemo invokes compute, memoizes the calculation result and returns it.

If during the next renderings the dependencies don’t change, then useMemo doesn’t invoke compute but returns the memoized value.

Using useMemo

After adding the useMemo to our code, if theIncrementbutton is clicked, the render APP will not be invoked, but it will only be invoked during the first rendering, or when the value of the array marksis modified.

What’s useCallback?

The starting point in this section will be an example showing a problem followed by a solution to fix this same problem using the useCallback hook.

Problem without using useCallback

Typing in the input field should only trigger the APP component to render, but not for the List component because the React.memo will prevent the List component for re-rendering.

But what happens is that the List component is always re-rendered when you type in the input field, even though the props of the List component are not changed.

What’s the problem?

TheonRemove callback in the APP component is redefined at each rendering. As a result, the List component assumes that the onRemove has changed and this causes the List component to re-render.

How to solve this problem?

What we need to do is to redefine the onRemove callback only when thetodos state value has changed and that’s when the magic of the useCallback intervenes.

The useCallback hook receives two parameters; one as callback, the other as an array of dependencies. The useCallback will return a memoized version of the callback, and it’ll only be changed if one of the dependencies has changed.

Using useCallback

After applying the useCallback hook, only the APP component will re-render when typing in the input field.

To conclude, useCallback and useMemo hooks aim to improve web performance with the help of the Memoization technique, but there’s a slight difference between them; useCallback is used to memoize functions whereas useMemo is used to memoize values.

I look forward to hearing from you and if you have any further questions, please do not hesitate to contact me.