);
};Code language: JavaScript (javascript)
```
In the application above, there are two states, one to store the number from the input form while the second to store the name. Basically, what this application does is that any number you input into the number field will calculate the factorial using the external function placed outside the component:
```
const calculateFibonacci = (n) => {
if (n < 2) {
return n;
}
return calculateFibonacci(n - 1) + calculateFibonacci(n - 2);
};Code language: JavaScript (javascript)
```
This expensive function is called inside the component, and the number state is passed into it, so it calculates the value, and you can then display it in the application:
```
const fibonacciResult = calculateFibonacci(number);Code language: JavaScript (javascript)
```
But the problem here is that whenever a state is updated, this function will always run even when the state does not affect the number state. For example, there is a`name`state; whenever you type into the name input field, it will always re-render the component, thereby always running this expensive function.
Let’s test this. If you pass a number from`35`upwards, you will begin to notice that it takes some seconds to calculate. This is because it will need to do a lot of recursions, as you can see in the GIF below.
That is not the problem, but the problem is that when you try to do anything on your application that involves a state, it will take time because the application will re-render. Meaning the Fibonacci function will always calculate the value for the number passed.
As you see below, when I type the name, even though it shows the component re-renders, it takes time for the name to appear because the function is calculated for each render.
To fix this, you will introduce the`useMemo`hook to store the value of expensive calculations and operations and stop them from continually rendering even when the component re-renders.`useMemo`is an official hook you can import from`react`.
```
import { useState, useMemo } from 'react';
// ...
const fibonacciResult = useMemo(() => calculateFibonacci(number), [number]);Code language: JavaScript (javascript)
```
At this point, when you update other states or props in your component, as long as the`number`state does not change, the value will be stored. The expensive function will not compute, making the performance of your application fast:
## Understanding the useMemo hook
The`useMemo`hook is one of the many built-in react hooks that allow you to memoize values in React applications. It is used basically in two situations which are:
- When computing expensive operations
- For referential equality
Overall, it memoizes computed values in a React component so that those values will not be recomputed when the component re-renders. This is the general syntax of the`useMemo`hook:
```
const memoizedValue = useMemo(() => {
return somevalue
}, [...dependencies])Code language: JavaScript (javascript)
```
The`useMemo`hook receives two arguments and is very similar to the ` [useEffect](https://coderpad.io/blog/development/rules-of-reacts-useeffect/) ` hook. The first argument is a callback function, which returns the value, and the second is an array of dependencies. When any of the values of any dependencies changes, a re-computation happens, and then the value is memoized again, which triggers the expensive operation. Just as you have seen in the previous example:
```
const fibonacciResult = useMemo(() => {
return calculateFibonacci(number);
}, [number]);Code language: JavaScript (javascript)
```
### Referential equality
In JavaScript, we have primitive and non-primitive data types. When you make an equality on primitive data types, they are checked based on their values, while for non-primitive data types like object and array, equality is based on references.
```
// primitive
let a = 5;
let b = 5;
console.log(a === b); // true
// non-primitive
let a = {name: "John Doe"};
let b = {name: "John Doe"};
console.log(a === b); // falseCode language: JavaScript (javascript)
```
Arrays and objects will always return false even though they are equal because their equality is based on references, meaning:
```
let a = {name: "John Doe"};
let b = {name: "John Doe"};
console.log(a.name === b.name); // trueCode language: JavaScript (javascript)
```
When objects or functions are declared within your component, they will always be redeclared whenever your component re-renders. Let’s confirm this in this example.
```
import { useState, useEffect } from 'react';
import './App.css';
export const App = () => {
const [name, setName] = useState('');
const [darkTheme, setDarkTheme] = useState(false);
const themeStyles = {
backgroundColor: darkTheme ? '#333' : '#FFF',
color: darkTheme ? '#FFF' : '#333',
};
useEffect(() => {
console.log('Theme changed');
}, [themeStyles]);
return (