useMemo.md

useMemo: Optimizing Performance with Memoization ⚡

Welcome back! Today, we’re exploring useMemo, a hook that helps optimize performance in your React applications by memoizing values. This means React can remember the results of expensive calculations, so it doesn’t need to redo them on every render. Let’s dive in!

First, Let's Talk About What is Memoization? 📝

Memoization is a programming technique used to speed up expensive function calls by storing the results of those calls. When the same inputs occur again, the function can return the cached result instead of recalculating it. It’s like keeping a cheat sheet for calculations to save time and resources!

Mia: "So, Leo, how does this relate to React?"

Leo: "Great question! In React, memoization helps improve performance by preventing unnecessary calculations during re-renders." 🚀

What is useMemo? 🔍

useMemo is a hook that allows you to memoize the results of a function. If the dependencies of that function haven’t changed, React will return the memoized value instead of recalculating it.

Mia: "So, why would I want to use useMemo?"

Leo: "When you have expensive calculations that don’t need to run on every render, useMemo can help boost your app’s performance!" 🚀

Syntax

The syntax for useMemo looks like this:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• computeExpensiveValue: A function that returns the value you want to memoize.
• [a, b]: An array of dependencies. The memoized value will only recalculate if one of these values changes.

Example: Expensive Calculation with Parent Component

Let’s see how useMemo works with a parent component. We’ll create a Fibonacci calculator, but we’ll also have a button that changes an unrelated piece of state.

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

// Function to compute Fibonacci number
const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

const FibonacciCalculator = () => {
  const [input, setInput] = useState(0);
  const [otherState, setOtherState] = useState(false);

  // Memoizing the calculated Fibonacci value
  const memoizedFibonacci = useMemo(() => {
    console.log("Calculating Fibonacci for input:", input);
    return fibonacci(input);
  }, [input]);

  return (
    <div>
      <h1>Fibonacci Calculator</h1>
      <input
        type="number"
        value={input}
        onChange={(e) => setInput(Number(e.target.value))}
      />
      <h2>Fibonacci of {input} is {memoizedFibonacci}</h2>
      <button onClick={() => setOtherState(!otherState)}>
        Toggle Other State
      </button>
    </div>
  );
};

export default FibonacciCalculator;

Explanation

• Fibonacci Function: A recursive function that calculates Fibonacci numbers. It can be slow for large inputs!

• Console Log: Each time the input changes, you’ll see a message in the console indicating when the Fibonacci calculation is being performed. This helps clarify that the calculation only happens when necessary, thanks to useMemo.

• Performance: By using useMemo, you ensure that expensive calculations are minimized, making your component more efficient and responsive.

• useMemo Usage: We use useMemo to memoize the Fibonacci calculation. If the input changes, the function recalculates; otherwise, it returns the cached result.

• Parent Component Logic: In this example, there’s also a button that toggles otherState. When you click the button, it triggers a re-render of the FibonacciCalculator component. However, since the input hasn't changed, the memoized value for memoizedFibonacci remains the same and is not recalculated.

Mia: "So, when I click the button, the Fibonacci calculation doesn’t run again?"

Leo: "Exactly! React knows the dependencies haven’t changed, so it uses the cached result." 🎉

When to Use useMemo

• Expensive Calculations: When you have computations that take a lot of resources.

• Referential Equality: When you want to ensure that a function or object reference remains the same between renders.

Fun Fact! 🎉

Did you know that optimizing performance using memoization can lead to significant improvements in rendering times? This is especially crucial in larger applications with lots of components!

---

Navigation

Previous: useReducer: Managing Complex State Logic | Next: useCallback: Preventing Unnecessary Re-renders