React Component Code Review

Problem PR-review exercise: you're handed an existing React component and asked to review it like a real pull request — find the problems, explain WHY each matters, and propose cleaner structure.

What to hunt for

• Performance: inline object/array/lambda props re-created each render breaking memoization, missing React.memo/useMemo/useCallback where profiling justifies them, expensive work in render, effects running too often (wrong/missing dependency arrays).
• State management: derived state stored redundantly (compute it instead), state that belongs higher/lower (lifting or colocation), direct state mutation, non-functional setState updates in async handlers, several booleans encoding one state machine.
• Correctness: missing/index-based list keys (explain the reconciliation consequence — state bleeding across reordered items), race conditions in effects without cleanup/abort, stale closures.
• Accessibility: divs-as-buttons (keyboard/focus loss), missing labels/alt text, focus management in modals, color-only signaling.
• Structure: god components → extract presentational children and custom hooks (useXxx for fetch/form logic), prop drilling vs context, naming and dead code.

What's evaluated

• Prioritization (correctness/a11y over nitpicks), explaining the why behind each finding, concrete refactor suggestions with trade-offs, and review tone — actionable comments, not a rewrite demand.