Memoization reuses the result of a calculation when its inputs have not changed. Correctness comes first: a cached total must refresh when a filter changes. Leaving a dependency out can make an optimization look fast while showing stale results. Adding unrelated state to the dependency list defeats the saved work.
You'll separate a costly row total from an unrelated note toggle. A visible calculation count gives repeatable evidence without relying on elapsed milliseconds on a shared computer. Toggling the note should reuse the total; toggling the Open filter should calculate the new total once. The preview does not use React Compiler, so this exercise makes manual useMemo behavior visible. Memo is an optimization, and the component must still render the correct amount whenever its input changes.
window.calculations=0;
const Total=memo(function Total({amount}){return <output aria-label="Total">{amount}</output>});
function App(){const [open,setOpen]=useState(false),[note,setNote]=useState(false);const amount=useMemo(()=>{window.calculations++;return f.rows.filter(row=>!open||row.status==='Open').reduce((sum,row)=>sum+row.amount,0)},[open]);return <><h1>{f.organization}</h1><Total amount={amount}/><output aria-label="Calculations">{window.calculations}</output><p>{note?'Note shown':'Note hidden'}</p><button onClick={()=>setNote(n=>!n)}>Toggle note</button><button onClick={()=>setOpen(n=>!n)}>Only open</button></>}
Trace the state change and its visible boundary before building the transfer tasks.