I’ve always admired those co-workers who somehow leave behind components so clean it feels like they live in an alternate universe. Meanwhile, in React, keeping a component clean feels like a daily battle. One day everything reads perfectly, and two days later it mutates into a spaghetti monster so tangled even Italians would refuse to claim it.
Back when I first started with React, I never separated logic out of my components. If I had a form, say on a sign-in page, everything lived inside that same file — state, handlers, validation, you name it. At first, it was fine. The code was short, readable, and I thought, why complicate things?
Looks clean, right? So what’s the point of changing it when it works and reads fine?
The problem is, code never stays small. Features keep piling on. One input today, another validation tomorrow, then a new API call, then error handling, and before you know it, that once-simple component has mutated into a monster no developer dares to read without coffee and a prayer.
This is what real-world applications do to your code: they grow. And if you don’t plan ahead, readability gets buried under feature creep. That’s where separation of concerns and custom hooks come in like a hero.
The rule of thumb? Keep your components dumb — just passing data in and out — and let the heavy lifting (form state, validation, side-effects) live inside a dedicated custom hook. Oh, and remember: most hooks are client-side only. You can’t call them in server components.
Now compare this version. Another dev can look at the hook, see its state, values, and functions, and instantly understand how the form works — instead of digging through spaghetti inside the component itself.
Top comments (0)