React library provides us two built-in hooks to optimize the performance of our app: useMemo & useCallback. At first glance, it might look like their usage is quite similar, so it can get confusing about when to use each. To clear that confusion, let’s dig in and understand the actual difference and the correct way to use them both.

Functional components have a problem

Functional components are great. Their combination with hooks allows for much more code reusability and flexibility than Class components. However, they do have one problem: A functional component is the same as the render function we used to have in class components. It’s a function that is being re-run on any prop/state change.

It means that:

• If a function is called inside the component, it will be re-evaluated, again and again, on every re-render.
• If a function is created inside the component is passed to a child component, it will be recreated, meaning the pointer will change, causing the child to re-render or call the function unnecessarily (depending on the situation).

To tackle the problem and prevent the possible performance issue, React provides us with two hooks: useMemo and useCallback.

useMemo

Let’s start with the first problem and see how we can prevent evaluating functions unnecessarily.

In the following demo, we have a component with two states: one store a number, and the other one a boolean.

We need to do some calculation on the number we have in our state, so we call our

plusFivefunction and render the result

const plusFive = (num) => {
  console.log("I was called!");
  return num + 5;
};
export default function App() {
  const [num, setNum] = useState(0);
  const [light, setLight] = useState(true);
  const numPlusFive = plusFive(num);
  return (
  ...
```<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://codesandbox.io/embed/use-memo-no-memo-g959e?fontsize=14&amp;hidenavigation=1&amp;theme=dark"></iframe>

If you open the console, you’ll see that plusFive is called whether we click on “Update Number” which sets a new number, or “Toggle the light” which updates the boolean state (and has nothing to do with numPlusFive).

So how can we prevent this from happening? By memoizing 

`plusFive` !

Until we will receive a new number, the function will not be called. The calculation is skipped, and we will receive the result immediately.

We will do that by using 

`useMemo` , and it will look like this:

const numPlusFive = useMemo(() => plusFive(num), [num]);

useMemo receives two parameters: A function that returns our function call, and an array of dependencies. Only when one of the dependencies is changed, our function will be called again. useMemo returns the results of that function execution and will store it in memory to prevent the function from running again if the same parameters were used.

Go ahead and see for yourself (don’t forget to open the console):

<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://codesandbox.io/embed/use-memo-tsc89?fontsize=14&amp;hidenavigation=1&amp;theme=dark"></iframe>

#react #reactjs #javascript #web-development #frontend-development #coding #react-hook #frontend