Performance optimization with React Hooks — useCallback & useMemo

An introduction to use useCallback & useMemo Hooks to optimize the performance of the web applications.

Photo by Artem Sapegin on Unsplash

This article is the 3rd part of the “introduction to React Hooks” series. Up to now, I discuss about the Basic Hooks and the useReducer Hook in Additional Hooks.

part 1: Introduction to React Hooks — Basic Hooks
part 2: Introduction to React Hooks — useReducer

In this article, I am going to discuss useCallback & useMemo Hooks and how to use them to optimize the perform of the web application with examples

1. useCallback

what is useCallback?

Returns a memoized callback.

useCallback is a built in Hook in React is used to return a memoized version of callback function. Memoization does the remembering or caching the results of the function. Memoized version of callback only changes, if one of the dependencies has changed. The cashed result is returned when same inputs are called again. Function and a list of dependencies are the input parameters to the useCallback. When one of these dependencies is changed return memoized.

React.useCallback(function, dependencies)

For example,

const memoizedCallback = useCallback(
 () => {
  setValue(value);
 },
 [value],
);

Why use useCallback?

useCallback is used to prevent unnecessary re-rendering in Parent component, when passing callbacks to the child components.

2. useMemo

what is useMemo?

Returns a memoized value.

useMemo is a built in Hook in React pass a create function and array of dependencies. It helps to avoiding complex calculations.

difference between useCallback and useMemo

• useCallback is to memoize a callback itself (referential equality) between renders
• useMemo is to memoize a calculation result between a function’s calls and between renders

when useCallback memoizes functions, useMemo memoizes any value.

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

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

Now, I am going to implement an simple web application with increment counter and multiply counter. Here, I use Counter function and App function components. In the App function Component contains the both increment Counter,the multiply Counter components and their values.

Figure 1 (web application view)

Counter.js

Figure 2 (Counter.js)

Here Counter function components is warped React.memo and it will be re-rendered when state is changed. React.memo is a higher order component that prevents function component being re-rendered, if props or state is not changed.

App.js without using useCallback()

Figure 3 (Counter.js — without useCallback())

When click the increment button then change only the value of the incrementValue, So the Counter increment is re-rendered. But, here, Counter multiply also re-rendered, although mulValue is not changed (initial value of mulValue is 2). If there is 10 components in App container, all are going to re-render. So that the useCallback helps to optimize the performance of the application.

Figure 4 (when click the increment both increment-counter and multiply-counter are re-rendered)

App.js using useCallback()

Figure 5 (App.js — using useCallback())

Figure 4 (when click the increment only increment-counter is re-rendered)

Here, the useCallback prevents the re-render of the multiply Counter.

Reference

Hooks API Reference - React