React component rules

Standing orders for AI agents writing React in this repository.

Components

• Function components only. Props typed with an inline interface or type — never any, never React.FC.
• One component per file for anything exported; co-locate small private helpers.
• Server components by default (if the framework supports them); add "use client" only when the component needs state, effects, or browser APIs — and say why in a comment.

State & effects

• Derive, don't sync: if a value can be computed from props/state, compute it — no mirroring into useState.
• useEffect is a last resort, for real external systems (subscriptions, DOM, timers). Data fetching goes through the repo's data layer, not ad-hoc effects.
• Every effect returns a cleanup if it starts anything (listener, interval, subscription).

Rendering & style

• Keys are stable ids, never array indexes for reorderable lists.
• Match the repo's existing styling approach exactly (CSS modules / Tailwind / styled) — never introduce a second one.
• Accessibility is not optional: interactive elements are buttons/links (not divs), inputs have labels, icons that act have aria-labels.

Boundaries

• No new UI libraries without asking.
• Don't reach for global state until two unrelated components genuinely need the same data.