08-recipes/07-refactor-a-large-file.md

Refactor a large file

Use this recipe when a file has grown too large and mixes multiple responsibilities.

The goal of refactoring is to improve structure without changing behavior.

Steps

1. Read the file completely to understand its responsibilities. 2. Identify clear responsibility boundaries (UI, reducer logic, API calls, helpers). 3. Extract one responsibility into a new file. 4. Keep the original file as the orchestrator. 5. Verify that behavior remains the same.

Typical splits

Common refactoring splits:

large UI file → extract sections
UI file with networking → move calls into apiClient.js
complex reducer → extract helper functions

Rules

refactor in small steps
avoid rewriting the whole file
keep naming consistent with the feature

Final rule

Refactor only enough to make the code easier to understand and modify. Avoid large rewrites unless the structure is clearly broken.