How to Use useMemo in React for Better Performance

The next time the question comes to you, you wouldn't have to work it from scratch; just refer back to the notes and state the answer. Simple, right? That is precisely what useMemo does: it "remembers" the result of a computation, and it won't redo that computation until something has changed. useMemo plays the same role in that it would "remember" the answer until the question would change.

How It Works

Recomputes Only When Needed: useMemo only recalculates the value if any of the values on which it depends (called dependencies) change; otherwise, it bales out.
Returns the Cached Value: If nothing changes, it simply returns you the saved result for the sake of saving time and resources.

Why should you hire useMemo?

useMemo is your booster to fast and economically run your program. It saves you from repeating the same tasks when no need is present. Thus, it is used to save time and resources when heavy work is involved.

When should you be using useMemo?

• Heavy Calculations: useMemo will save you from re-calculating if you're doing anything heavy like sorting or filtering a huge list of data.
• Consistency: Sometimes you want a value never to change (reference-wise) to avoid unnecessary re-renders from other parts of your app. useMemo helps with that as well.

When NOT to use useMemo

Not all situations call for useMemo. When you are working with trivial math or basic operations, it may actually add to the complexity rather than worth it. Save it for heavy lifting—don't take a bulldozer to dig a small hole.”

4. How to use useMemo

Syntax:

const memoizedValue = useMemo(() => computeValue(), [dependencies]);

Step-by-Step:

• Pass a function returning a Premier value for memoization.
• Define dependencies: variables that trigger recalculation.

Example:

const sortedList = useMemo(() => [...list].sort(), [list]);

5. Real-World Examples of useMemo

Example 1: A List Filter

Assuming that we have a list of items able to filter based on user input from a search box. Normally, the filtering logic runs every time the parent component re-renders, although neither the list nor the search term may have changed. This is where useMemo comes in handy:

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

function ItemList({ items }) {
  const [searchTerm, setSearchTerm] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => 
      item.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [items, searchTerm]);

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

What's happening?

• The filteredItems array will be recalculated only if items or search terms change.
• Thus, if a user types quickly, or if for another reason the whole component re-renders, then the filtering logic will not run for nothing.

Example 2: Heavy Calculation

Let's say you are calculating total sales for a large dataset, say, a list of sales transactions. Well, that calculation might involve looping through thousands of entries, which may be slower if done multiple times. Here's how useMemo can be of help:

import React, { useMemo } from 'react';

function SalesReport({ salesData }) {
  const totalSales = useMemo(() => {
    console.log('Calculating total sales...');
    return salesData.reduce((total, sale) => total + sale.amount, 0);
  }, [salesData]);

  return (
    <div>
      <h2>Total Sales: ${totalSales}</h2>
    </div>
  );
}

What's happening?

TotalSales value is recalculated only when salesData changes.
If for any other reason the component re-renders, the expensive calculation is avoided altogether, and the cached value is used.

Example 3: Referential Equality

Sometimes you want to ensure a value is the same (in reference) to avoid unnecessary re-renders in child components. This works well when easily passing props of components that are wrapped in React.memo. An example follows:

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

const ChildComponent = React.memo(({ config }) => {
  console.log('Child component re-rendered!');
  return 
Config: {JSON.stringify(config)}
;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const config = useMemo(() => {
    return { theme: 'dark', layout: 'grid' };
  }, []); // Empty dependency array means this never changes

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Click Me ({count})</button>
      <ChildComponent config={config} />
    </div>
  );
}

What's happening?

• The config object is cached, so between re-renders it stays the same.
• In this case, the parent gets re-rendered on button click, but the child does not get re-rendered since config did not change.

Why are these examples important?

These examples show the good ways useMemo can help you:

• Avoid unnecessary work (like filtering or calculating).
• Keep your app responsive and quick.
• Prevent re-renders from happening for child components without any good reason.

Common Mistakes to Avoid with useMemo 

While useMemo is a powerful tool, it’s easy to misuse it if you’re not careful. Here are some common pitfalls to watch out for: 

1. Overusing useMemo

• It’s tempting to add useMemo everywhere, thinking it will magically make your app faster. But the truth is, not every calculation or value needs to be memoized. 
• Overusing useMemo can actually make your code harder to read and maintain without providing any real performance benefits. 

What to Do Instead: 

• Use useMemo only when you’ve identified a performance bottleneck.
• Profile your app first to see where the slowdowns are happening, and then apply useMemo strategically. 

2. Incorrect Dependencies 

• One of the trickiest parts of useMemo is getting the dependency array right. 
• If you forget to include a dependency, the memoized value might become stale or outdated, leading to bugs that are hard to track down. 

What to Do Instead: 

Double-check the dependency array to make sure it includes all the values that affect the calculation. If you’re using ESLint, enable the exhaustive-deps rule to catch missing dependencies automatically. 

3. Memorizing Non-Expensive Operations 

• Using useMemo for simple calculations or trivial tasks can actually hurt performance.
• Remember, useMemo itself adds a small overhead because React has to manage the caching logic. 
• If the calculation is quick, this overhead might cost more than just recalculating the value. 

What to Do Instead: 

• Only use useMemo for operations that are truly expensive, like filtering large datasets or performing complex math. For simple tasks, skip useMemo and let React handle it. 
• The Bottom Line useMemo is a great tool, but it’s not a one-size-fits-all solution. 
• Use it wisely, and always ask yourself: Is this calculation expensive enough to justify useMemo? Are my dependencies correct? Am I adding unnecessary complexity?

Conclusion

One can conclude that the React feature, useMemo, is a blessing. It optimizes the performance of the app through caching of the values and thereby, avoids unwanted recomputation. Like any other tool, useMemo becomes a real tool in the hand of a developer when equally thought over.

The Final Note

Use useMemo where it is really beneficial; for example, optimization of heavy computations and prevention of unwanted extra re-renders. This shouldn't come at the cost of the readability and maintainability of your code.

Leave off on Fresh Grounds

If you are learning the use of useMemo, some little contagion would be good. Determine one or two aspects of your application where you feel that performance would be improved, give it a go, and see what happens. Eventually, you would learn how to apply it most advantageously.

Having said that, good luck with it! Try it out and see how useMemo speeds up and smoothens your app. Happy coding! 🚀