?? Mastering React Hooks: A Beginner's Guide to useMemo

?? Promo:

Since we discussed sharing state across components with useContext, useMemo helps optimize state handling by caching results of expensive computations, ensuring better performance.

In React, sometimes a single change can cause an entire component to re-render, slowing down performance. This is where useMemo comes in by memoizing the result of an expensive computation, useMemo ensures that React recalculates only when necessary. This post will guide you through understanding and using useMemo to optimize your components effectively!

?? What is useMemo?

useMemo is a React hook that memorizes the return value of a function, recalculating it only when its dependencies change. It’s especially useful for caching values from heavy calculations or to prevent unnecessary re-renders when rendering depends on non-trivial calculations.

?? How Does It Work?

1. Define the Expensive Calculation: Identify the costly function that you want to optimize.
2. Wrap with useMemo: Use useMemo to memoize the result based on dependencies.
3. Add Dependencies: Specify dependencies that should trigger recalculation when they change.

? Example

Imagine an expensive calculation in a component that counts the number of prime numbers up to a given limit. Here’s how useMemo can make it efficient:

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

function PrimeCounter() {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(100);

  const isPrime = (num) => {
    for (let i = 2; i < num; i++) {
      if (num % i === 0) return false;
    }
    return num > 1;
  };

  const calculatePrimes = (num) => {
    let primes = [];
    for (let i = 1; i <= num; i++) {
      if (isPrime(i)) primes.push(i);
    }
    return primes.length;
  };

  // Memoize the result of calculatePrimes
  const primeCount = useMemo(() => calculatePrimes(number), [number]);

  return (
    <div>
      <h3>Prime Count: {primeCount}</h3>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}        

?? Key Points to Remember

• Recalculate Only When Dependencies Change useMemo will only recompute calculatePrimes when number changes, improving performance by avoiding re-execution on every render.

// ? Correct With useMemo, calculatePrimes run only when number changes
const primeCountOptimized = useMemo(() => calculatePrimes(number), [number]);

// ? Wrong calculatePrimes would run on every render, slowing down the app.
const primeCount = calculatePrimes(number);        

• Use for Computationally Expensive Functions Only Avoid wrapping trivial functions in useMemo it adds overhead and can negatively impact performance if overused.

// ? Correct
const cheapCalculation =  calculateSmallTask(); 

// ? Unnecessary Optimization
const cheapCalculation = useMemo(() => calculateSmallTask(), []);         

• Understand When Not to Use useMemo can help with performance, but overuse can complicate your code. Use it thoughtfully for noticeable impact.
• Memoize Constant Dependencies useMemo is also handy when passing objects or functions as props that otherwise trigger re-renders in child components.

?? wait what?

Ok useMemo will come in handy when we need to memoize the return value of a function how can we memoize a component?

?? fear not we have his lil bro React.Memo

?? Conclusion

With useMemo, React applications can avoid unnecessary re-renders and recalculations, making them more efficient and responsive. Used correctly, it’s a powerful optimization tool that enhances user experience by ensuring smooth performance.

?? What Next:

Now that we know how to cache values and prevent costly calculations, what if we want to handle callbacks more effectively? Hint: The next hook also helps with performance!