u/OMAR_M_AHMAD

I’ve noticed something interesting in a lot of React codebases.

Some components look clean at first glance.

Short functions, nice formatting, everything seems organized.

But once you look closer, they’re actually doing:

• data fetching
• validation
• business rules
• UI state
• error handling

All inside the same component.

It works… but it feels like hidden complexity.

On the other hand, when I separate:

• validation logic
• service / API calls
• UI layer

The code looks slightly more “verbose”, but way easier to reason about and extend.

So now I’m starting to think:

The real difference isn’t between messy code and clean code.

It’s between code that looks clean…

and code that actually stays clean as the project grows.

Curious how you approach this.

Do you keep logic inside components for speed ?

Or do you prefer extracting everything early ?