React Performance - useMemo

useMemo caches expensive calculations to improve performance.

Problem - Expensive Calculation

function App() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  // Runs on every render!
  const expensiveResult = calculateExpensive(count);

  return <div>{expensiveResult}</div>;
}

Solution - useMemo

import { useMemo } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  const expensiveResult = useMemo(() => {
    return calculateExpensive(count);
  }, [count]); // Only recalculates when count changes

  return <div>{expensiveResult}</div>;
}

Filtering Example

function UserList({ users }) {
  const [search, setSearch] = useState('');

  const filteredUsers = useMemo(() => {
    return users.filter(user =>
      user.name.toLowerCase().includes(search.toLowerCase())
    );
  }, [users, search]);

  return (
    <div>
      <input value={search} onChange={e => setSearch(e.target.value)} />
      {filteredUsers.map(user => <p key={user.id}>{user.name}</p>)}
    </div>
  );
}

Remember

• Use for expensive calculations
• Specify dependencies
• Don't overuse (has overhead)

Next: Learn useCallback!