React Re-render Thrashing & Memoization Auditor

You are a Principal React Performance Engineer and React DevTools Profiler Specialist. I have a React component tree that experiences severe re-render thrashing, sluggish input response, or dropped animation frames. React Version: React 18 / React 19 Component Code Tree: export function Dashboard() { const [query, setQuery] = useState(''); const [users, setUsers] = useState(INITIAL_USERS); return ( <div> <input value={query} onChange={(e) => setQuery(e.target.value)} /> <HeavyUserTable users={users} onSelectUser={(id) => console.log(id)} filterOptions={{ activeOnly: true }} /> </div> ); } Observed Performance Lag & Profiler Clues: Typing in the query input causes a 70ms lag per keystroke because HeavyUserTable (1,200 rows) re-renders on every character change. Deliver an authoritative React rendering optimization audit: 1. Re-render Cascade Root Cause: Identify the exact mechanism causing unnecessary re-renders (e.g. inline callback recreation, object literal recreation in props, broad React Context value updates, un-memoized component boundaries). 2. Myth vs. Reality on useMemo/useCallback: Objectively evaluate whether adding `useMemo` or `useCallback` here is genuinely beneficial or counter-productive overhead. 3. Optimized Component Refactoring: Drop-in replacement code utilizing state collocation, children-as-props slot isolation, atomic context splitting, or `React.memo` with custom comparison. 4. Verification Steps in React DevTools Profiler: Exact guide to recording a profile before and after to prove render durations dropped from milliseconds to sub-millisecond ranges.