1-import { useState } from 'react'
1+import { useState, useMemo, useCallback } from 'react'
44 items: { id: string; price: number; category: string }[]
88 export function PriceSummary({ items, category }: Props) {
99 const [multiplier, setMultiplier] = useState(1)
11- const filteredItems = items.filter((i) => i.category === category)
12- const total = filteredItems.reduce((sum, i) => sum + i.price, 0)
13- const finalTotal = total * multiplier
11+ const filteredItems = useMemo(
12+ () => items.filter((i) => i.category === category),
16+ const total = useMemo(
17+ () => filteredItems.reduce((sum, i) => sum + i.price, 0),
21+ const formattedTotal = useMemo(
22+ () => `$${total.toFixed(2)}`,
26+ const label = useMemo(() => `Total: ${formattedTotal}`, [formattedTotal])
28+ const handleReset = useCallback(() => setMultiplier(1), [])
30+ const handleDouble = useCallback(
31+ () => setMultiplier(multiplier * 2),
35+ const finalTotal = useMemo(
36+ () => total * multiplier,
17- <p>Total: ${total.toFixed(2)}</p>
1843 <p>With multiplier: ${finalTotal.toFixed(2)}</p>
19- <button onClick={() => setMultiplier(1)}>Reset</button>
20- <button onClick={() => setMultiplier(multiplier * 2)}>Double</button>
44+ <button onClick={handleReset}>Reset</button>
45+ <button onClick={handleDouble}>Double</button>
