Summary - useMemo

Wrap the filter and sort of a big list with useMemo.

Summary - useMemo

In this group you learned what useMemo is, the dependency check, and the pitfalls. Now you can safely cache expensive computations.

The recipe: wrap only genuinely slow computations in useMemo, write the dependency array completely, keep the function pure. These three steps make useMemo bring speed without harm.

In the next step you'll write a list component that both filters and sorts.

Exercise Write FilterSortList

Complete the skeleton. Write a FilterSortList component. Take ({ '{ items, query }' }). Compute visible with useMemo(() => items.filter(i => i.name.includes(query)).sort((a, b) => a.name.localeCompare(b.name)), [items, query]). Inside <ul>, render visible.map(i => <li key={ '{ i.id }' }>{ '{ i.name }' }</li>). Export it.

Show example solution

import { useMemo } from "react";

function FilterSortList({ items, query }) {
  const visible = useMemo(
    () => items.filter((i) => i.name.includes(query)).sort((a, b) => a.name.localeCompare(b.name)),
    [items, query],
  );
  return (
    <ul>
      {visible.map((i) => (
        <li key={i.id}>{i.name}</li>
      ))}
    </ul>
  );
}

export default FilterSortList;

Test yourself

When should useMemo NOT be used?
- For small computations
- For expensive computations
- For big list filters
- For complex computations
Show answer

For small computations — Not for small computations.
Match the useMemo recipe

expensive

use
small

don't
pure

required
deps

complete

Next lesson: What is useCallback?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies