When I joined this project, it had grown without much architecture oversight. Typical of fast-moving startups.
Components files would regularly exceed 300 lines, and passing data down many layers became a maintenance nightmare. Every minor UI change required digging through tangled code and duplicated logic.
A full rewrite was (obviously) not an option.
Instead, I focused on targeted improvements to make the code easier to work with, faster to update and more reliable.
Core issues
Both core issues originated from anti-patterns:
- Data passed through too many layers: Simple state like whether a modal is open was being sent down 6+ levels of components.
- Big components doing too much: One file managed UI, data fetching, state, and side effects all at once, making it hard to isolate problems or reuse code.
How I fixed it
Instead of rewriting, I used React’s built-in tools to share state directly where it was needed, no more prop-drilling. This meant components could focus on what they do best: displaying UI.
I also split big components into smaller, focused pieces with clearly defined responsibilities. Logic and side effects moved into reusable “hooks,” while UI rendering was delegated to simple, stateless components.
Results
- Component files shrank by about 30%, making code easier to read and update.
- Developers no longer struggled with passing data through dozens of components.
- UI Changes became faster and safer, with fewer bugs and regression.
Keeping functionality stable while making change cheaper and safer, following Good Programming Principles.