🎨 Frontend Engineering · React Patterns

Colocate state where it is consumed

Choose between local state, lifted state, URL state, and stores by asking who needs the data and when.

foundation~25 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Steps

1Start local with useState; lift only when a sibling truly needs it
2Move shareable UI state (tab, sort, filters) into URL search params
3Use a store only for cross-tree client state that changes often
4Derive values during render instead of syncing via effects
5Keep server data in a query cache, never copied into local state
6Delete any effect whose dependency list keeps growing to mirror other state

Common Pitfalls

▲Duplicating server data into useState then fighting staleness
▲Global store as default dumping ground

Commands

Install with skills CLI

$ npx skills add aniruddhaadak80/skills --skill react-patterns-state-collocation

Install globally

$ npx skills add aniruddhaadak80/skills --skill react-patterns-state-collocation -g

Tags

#state#architecture#frontend-engineering#react-patterns

Install this skill

$ npx skills add aniruddhaadak80/skills --skill react-patterns-state-collocation -a opencode

SKILL.md

# Colocate state where it is consumed

> Choose between local state, lifted state, URL state, and stores by asking who needs the data and when.

## When to Use This Skill

Choose between local state, lifted state, URL state, and stores by asking who needs the data and when.

## Steps

1. Start local with useState; lift only when a sibling truly needs it
2. Move shareable UI state (tab, sort, filters) into URL search params
3. Use a store only for cross-tree client state that changes often
4. Derive values during render instead of syncing via effects
5. Keep server data in a query cache, never copied into local state
6. Delete any effect whose dependency list keeps growing to mirror other state

## Common Pitfalls

- Duplicating server data into useState then fighting staleness
- Global store as default dumping ground

View source on GitHub ↗

Decide what renders on the server versus client in React Server Components to minimize JavaScript shipped.

🎨 Frontend Engineering·~30m

Open →

Design error, loading, and empty states firstfoundation

Treat non-happy paths as features: skeleton loaders, typed errors, retry affordances, useful empties.

🎨 Frontend Engineering·~20m