n React, useMemo is a hook that helps optimize performance by memoizing the result of an expensive computation, preventing unnecessary recalculations on every render. Essentially, it “remembers” the result of a computation and only recalculates it if one of the dependencies has changed.

Syntax:

• computeExpensiveValue(a, b): This is the function or computation you want to memoize.
• [a, b]: These are the dependencies that trigger a recomputation when their values change. If none of the dependencies change between renders, the memoized value is used instead of recalculating.

When to Use useMemo?

useMemo is useful when:

1. You have a computation (like complex calculations, filtering large lists, etc.) that is expensive or time-consuming.
2. You want to avoid performing that computation on every render, especially when the dependencies haven’t changed.

Example 1: Avoiding Recalculations

import React, { useMemo, useState } from 'react';

function ExpensiveComputation({ a, b }) {
const expensiveComputation = (a, b) => {
console.log('Computing...');
return a + b;
};

// Using useMemo to memoize the result of the expensive computation
const result = useMemo(() => expensiveComputation(a, b), [a, b]);

return <div>Result: {result}</div>;
}

export default ExpensiveComputation;

Here:

• The function expensiveComputation will only run when either a or b changes. If both are the same between renders, React will return the memoized value instead of recalculating it.
• Without useMemo, expensiveComputation would be called on every render, which could be inefficient.

Example 2: Optimizing a List Filtering

import React, { useState, useMemo } from 'react';

function FilteredList() {
const [filter, setFilter] = useState('');
const items = ['apple', 'banana', 'grape', 'kiwi', 'orange'];

// Memoizing the filtered list to avoid recalculating on every render
const filteredItems = useMemo(() => {
console.log('Filtering list...');
return items.filter(item => item.includes(filter));
}, [filter]);

return (
<div>
<input
type="text"
value={filter}
onChange={(e) => setFilter(e.target.value)}
placeholder="Filter items"
/>
<ul>
{filteredItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}

export default FilteredList;

In this example:

• The list of items is filtered based on the filter state.
• useMemo ensures that the filter operation is only performed when the filter input changes. Without useMemo, the filtering would be repeated on every render, even if the filter value hasn’t changed.

Important Notes:

• useMemo does not memoize the function: It memoizes the result of a function, not the function itself. If you want to memoize a function, you should use useCallback instead.
• Performance Tradeoff: While useMemo can improve performance, it introduces some overhead. It’s typically used for expensive computations. In most cases, React is efficient enough, so useMemo should be used only when needed.
• Dependencies: The dependencies array should contain everything the memoized function relies on. If you omit any, the memoized value may not be updated correctly.

Summary:

• useMemo is used to memoize expensive calculations or operations, ensuring they are only recomputed when necessary (i.e., when dependencies change).
• It is helpful in optimizing performance for complex computations or operations that can be expensive if run on every render.