React Isn’t the Hard Part, Designing for Change Is

Most React tutorials teach you how to use hooks. Fewer teach you how to think in React.

After building and maintaining real-world React applications, I’ve learned that the hardest part isn’t writing components, it’s designing systems that don’t fight you six months later.

This post isn’t about syntax. It’s about mindset.

Components Are Contracts, Not Just UI

When I design a component, I think of it as a contract:

• What does it promise to do?
• What does it deliberately not do?
• How hard is it to misuse?

Patterns like compound components exist because they guide usage naturally.

<Tabs>
  <Tabs.List />
  <Tabs.Content />
</Tabs>

This isn’t clever, it’s defensive design. It limits misuse while keeping flexibility.

State Is a Liability

Every piece of state has a cost:

• More re-renders
• More edge cases
• More bugs

My rule of thumb:

If state can be derived, don’t store it.

Instead of reaching for useEffect, I ask:

• Can this be calculated?
• Can it live closer to where it’s used?
• Can it be moved into a hook?

Custom Hooks Are How You Tell a Story

Hooks aren’t just for reuse, they’re for meaning.

Compare:

useEffect(() => { ... }, []);

vs

useUserSession();

The second tells future developers why something exists, not just how it works.

Good hooks read like sentences.

Performance Is About Restraint, Not Optimisation

I don’t reach for useMemo early.
I reach for simpler component boundaries.

• Smaller components
• Clear ownership
• Fewer props

Performance problems often disappear when design improves.

Side Effects Should Feel Boring

If your useEffect feels clever, it’s probably wrong.

Effects should be:

• Small
• Predictable
• Easy to delete

Anything complex belongs in a hook or service layer.

Folder Structure Is Architecture in Disguise

Your folder structure reveals how your system thinks.

That’s why I prefer:

features/
  auth/
  billing/
  dashboard/

Over technical groupings.

Features change together, so they should live together.

My North Star

My goal isn’t to write “advanced React”.

My goal is to write code that:

• Explains itself
• Survives change
• Makes the next feature easier, not harder

React gives us the tools.
Design is what makes them work.