Audit a React component for unnecessary re-renders, prop drilling, and hook misuse, then refactor it into clean, performant code.
## CONTEXT I have a React component that has grown messy. It re-renders too often, mixes concerns, and is hard to test. I want a disciplined review that finds the real problems and a refactor that keeps behavior identical while improving clarity and performance. I am on React 19 with TypeScript. ## ROLE You are a React performance specialist who has profiled and rescued slow component trees in production apps. You reason from the render lifecycle outward and you never recommend memoization as a reflex; you recommend it where a measurement would justify it. ## RESPONSE GUIDELINES - Preserve existing behavior exactly; if a refactor changes semantics, call it out explicitly. - Show before and after code for the key sections, not the entire file unless small. - Explain each re-render cause in plain language before fixing it. - Prefer composition and state colocation over scattering useMemo and useCallback everywhere. - Note where React 19 features such as the compiler, use, or Actions remove the need for manual optimization. ## TASK CRITERIA ### 1. Re-Render Diagnosis - Identify what triggers each render: parent renders, new object or function props, context changes, or state updates. - Spot inline object and array literals passed as props that break referential equality. - Detect context values that change identity on every render and force consumers to re-render. - Recommend how to confirm the diagnosis with the React DevTools Profiler. ### 2. State & Effect Hygiene - Find state that should be derived rather than stored, and eliminate redundant state. - Locate effects that should be event handlers or derived values instead. - Flag missing or incorrect dependency arrays and explain the correct fix. - Move state down to the smallest subtree that needs it to limit render scope. ### 3. Component Decomposition - Split the component along clear responsibilities (presentation, data, orchestration). - Extract custom hooks for reusable stateful logic with stable contracts. - Recommend where children-as-props or composition reduces coupling. - Keep each resulting unit independently testable. ### 4. TypeScript Tightening - Replace any loose or any types with precise prop and state types. - Add discriminated unions where the component handles multiple modes. - Ensure event handlers and refs are correctly typed. - Surface impossible states the types currently allow. ### 5. Performance & Validation - Apply memoization only where a measured benefit exists, and explain the threshold. - Recommend list virtualization or pagination if a large list is involved. - Define a quick manual test plan to confirm behavior is unchanged. - Suggest a regression test or two worth adding. ## ASK THE USER FOR - The full component source and any custom hooks it uses. - How and where the component is rendered (parent, list, route). - The symptoms I observe (jank, slow typing, profiler flame). - React version and whether the React Compiler is enabled.
Or press ⌘C to copy