React Performance - useMemo

useMemo caches expensive calculations to improve performance.

Problem - Expensive Calculation

```javascript 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

```javascript 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

```javascript 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!