Component Refactoring Skill

Refactor high-complexity React components with proven patterns and workflows.

Complexity Threshold: Components with cyclomatic complexity > 50 or line count > 300 should be candidates for refactoring.

Use When:

• bun analyze-component shows high complexity.

• Users ask for "code splitting", "hook extraction", or "cleanup".

• A component file exceeds 300 lines of code.

Core Refactoring Patterns

1. Extract Custom Hooks

Goal: Separate UI from State/Logic.

Before:

function UserList() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(false);

useEffect(() => { setLoading(true); fetch('/api/users').then(data => { setUsers(data); setLoading(false); }); }, []);

if (loading) return <Spinner />; return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>; }

After:

// hooks/useUsers.ts function useUsers() { return useQuery({ queryKey: ['users'], queryFn: fetchUsers }); }

// UserList.tsx function UserList() { const { data: users, isLoading } = useUsers(); if (isLoading) return <Spinner />; return <UserListView users={users} />; }

2. Extract Sub-Components

Goal: Break down monolithic JSX.

Before:

function Dashboard() { return ( <div> <header>...</header> <aside>...</aside> <main> <section className="stats">...</section> <section className="feed">...</section> </main> </div> ); }

After:

function Dashboard() { return ( <Layout> <DashboardHeader /> <DashboardSidebar /> <DashboardContent> <StatsWidget /> <ActivityFeed /> </DashboardContent> </Layout> ); }

3. Simplify Conditional Logic

Goal: Reduce nesting and if/else checks implementation details.

• Use Lookup Tables (Maps/Objects) instead of Switch/If-Else chains.

• Use Guard Clauses (Early Returns) to avoid deep nesting.

4. Extract Modal Management

Goal: Centralize modal state and logic.

• Move modal definitions to a generic <ModalManager /> or context if reused globally.

• Keep the isOpen state locally if specific to a single component, but extract the Modal content to a separate file.

Workflow

• Analyze: Run complexity analysis or review the file manually.

• Plan: Identify seam lines (Logic vs UI, Section vs Section).

• Extract: Create new files for hooks or components.

• Integrate: Replace original code with imports.

• Verify: Ensure functionality remains identical and tests pass.