maintainable-react
Maintainable React comes from resisting premature abstraction and keeping data flow obvious — not from DRY, not from "clean code" for its own sake. The most common way a React codebase rots is the opposite of messiness: a well-meaning shared component or hook that grows a new prop, a new if, a new variant for every edge case until no one can safely touch it. Optimize for the next developer reading one file, not for eliminating every repeated line.
These are principles to apply and to check against, not an ordered procedure. Each names a leading word — carry it while you work.
Avoid hasty abstractions (AHA) — beware the demon component
Duplication is cheaper than the wrong abstraction. Do not build a shared component, hook, or util until you have two or three real call sites that demonstrably share a shape. Abstract from concrete examples, never from anticipation.
The failure mode to fear is the demon component: one component that absorbs every new use case through more boolean props (isCompact, hideHeader, variant="settings") and conditional branches until it is unreadable and unsafe to change. When an abstraction starts fighting you — you're adding a prop just to make one caller behave differently — that is the signal to back it out: let the call sites diverge back into separate components and re-abstract later only if a genuine common shape emerges.
- Two similar-but-separate components are healthier than one component with a
variantprop and five conditionals. - Prefer more lines of straightforward code over one clever generic that needs a mental model to use.
- Extract a hook or component when it is hard to read in one pass or genuinely reused — not "for the fun of it." A long function with clearly-named chunks beats a hook extracted purely for tidiness (premature hook extraction usually complicates effect/dependency timing rather than simplifying it).
Derive, don't sync
If a value can be computed from existing props or state, compute it during render — do not store it in useState and keep it in sync with an Effect.