Quick and dirty guide of useMemo

Quick and dirty guide of useMemo

Feb 03, 2024

1 min read

Hello world, welcome to this quick useMemo overview.

Today, let's dive into the nitty-gritty of a powerful hook that can sprinkle some magic dust on your app's performance – useMemo. Now, don't let the name scare you off. It's not a spell from the wizarding world; it's just a React hook that helps you optimize your app by memoizing expensive computations. Fancy, right?

So, what's the deal with useMemo? Well, imagine your app is juggling complex calculations every time it renders. Without optimization, it's like asking your grandma to solve a Rubik's Cube blindfolded – it'll take time. useMemo is like giving her a cheat sheet, making those calculations lightning-fast.

Let's get down to brass tacks with a simple example. Say you have a component that calculates the square of a number. Instead of computing it every time your component renders, you can use useMemo to cache the result and only recalculate when the input changes. Check this out:

example.js

javascript

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

function SquareCalculator({ number }) {
  const square = useMemo(() => {
    console.log('Calculating square...');
    return number * number;
  }, [number]);

  return (
    <div>
      <p>The square of {number} is: {square}</p>
    </div>
  );
}

See what happened there? The useMemo hook takes a function and an array of dependencies. If any dependency changes, the function recalculates; otherwise, it uses the memoized result. Efficiency win!

Now, let's talk real-world. Imagine you're building a data-intensive React app that fetches a list of products from an API and displays them in a table. Each product has various details, and you want to sort and filter them dynamically without hitting the API on every render.

product-list.jsx

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

function ProductList() {
  const [products, setProducts] = useState([]);
  const [sortBy, setSortBy] = useState('name');
  const [filterBy, setFilterBy] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('api/products');
      const data = await response.json();
      setProducts(data);
    };

    fetchData();
  }, []);

  const filteredAndSortedProducts = useMemo(() => {
    const filteredProducts = products.filter(product =>
      product.name.toLowerCase().includes(filterBy.toLowerCase())
    );

    const sortedProducts = filteredProducts.sort((a, b) => {
      if (sortBy === 'name') {
        return a.name.localeCompare(b.name);
      } else if (sortBy === 'price') {
        return a.price - b.price;
      }

      return 0;
    });

    return sortedProducts;
  }, [products, filterBy, sortBy]);

  return (
    <div>
      <label>
        Filter by Name:
        <input
          type="text"
          value={filterBy}
          onChange={(e) => setFilterBy(e.target.value)}
        />
      </label>

      <label>
        Sort by:
        <select
          value={sortBy}
          onChange={(e) => setSortBy(e.target.value)}
        >
          <option value="name">Name</option>
          <option value="price">Price</option>
        </select>
      </label>

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {filteredAndSortedProducts.map(product => (
            <tr key={product.id}>
              <td>{product.name}</td>
              <td>{product.price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

In this example, the useMemo hook is used to memoize the filtered and sorted array of products. The expensive operations, such as filtering and sorting, are only recalculated when the dependencies (products, filterBy, and sortBy) change. This way, even if the component re-renders due to other state changes, the heavy computations are skipped unless necessary.

In conclusion, useMemo is like a secret weapon in your React arsenal. It won't turn you into a superhero overnight, but it can definitely make your app feel like one. So, the next time you find your app slogging through computations, just sprinkle a little useMemo magic, and watch it soar.