refactor

name	refactor
description	Analyze and improve a React/TypeScript code file following component composition, hooks, performance, and file organization best practices.
argument-hint	[react-file]

React Code File Improvement Instructions

File to improve: $ARGUMENTS

Task: Improve React Code File

Please analyze and improve the provided React code file according to these guidelines:

Core Principles:

1. Maintainability First - Code should be easy to understand, modify, and extend
2. Performance - Optimize for efficiency without sacrificing readability
3. Idiomatic React - Follow current React best practices and patterns

Specific Requirements:

File Organization:

• Keep files under 300 lines of code (LOC)
• If the file exceeds 300 LOC, split it into smaller, focused modules:
• Separate components into their own files
• Extract custom hooks into a hooks/ directory
• Move utility functions to a lib/ directory
• Group related components in feature-based folders

React Best Practices:

• Use functional components with hooks (no class components unless absolutely necessary)
• Implement proper component composition over inheritance
• Keep components pure and side-effect free where possible
• Use React.memo() for expensive components that receive stable props
• Implement error boundaries for robust error handling
• Follow the Rules of Hooks

Code Quality:

• Extract complex logic into custom hooks (prefix with use)
• Avoid inline function definitions in render methods
• Use descriptive variable and function names
• Add PropTypes or TypeScript interfaces for type safety
• Remove unnecessary re-renders (check dependency arrays)
• Eliminate console.logs and commented-out code

Performance Optimizations:

• Use useMemo() for expensive computations
• Use useCallback() for stable function references passed to child components
• Implement lazy loading with React.lazy() for code splitting
• Avoid unnecessary state updates
• Use key props correctly in lists

State Management:

• Keep state as local as possible
• Lift state only when necessary
• Consider useImmerReducer for complex state logic
• Avoid prop drilling - use Context API or composition

Styling:

• Prefer CSS Modules, styled-components, or Tailwind over inline styles
• Keep styling logic separate from business logic
• Use consistent naming conventions for CSS classes

Output Format:

1. If the file is under 300 LOC, provide the improved version
2. If the file needs splitting, provide:

• A file structure showing how to organize the code
• The refactored main file
• At least one example of an extracted component/hook/utility

Additional Considerations:

• Preserve all existing functionality
• Add brief comments for complex logic
• Ensure accessibility (ARIA labels, semantic HTML)
• Handle loading and error states appropriately
• Make components reusable where sensible
• Always run bun check afterwards and FIX any linting errors.

Please analyze the code and provide your improvements with explanations for significant changes.