react-ruleslisted

# subroutine — React discipline Apply this to React components and hooks. Read the scoped `AGENTS.md` first for the router, data layer, form library, design system, i18n, and testing policy. ## Make the file tree express the render tree - Define exactly one React component per file using a named `function`. - A leaf is one file. When it gains children/support code, turn it into a folder whose `index.tsx` exports the parent and only composes layout. - Put shared-by-siblings code at their lowest common ancestor. Keep nesting shallow and colocate private hooks/types with their owner. ```text MembersTable/ ├── index.tsx └── MemberRow/ ├── index.tsx ├── RoleBadge.tsx ├── RowActions.tsx └── useMember.ts ``` ## Pass identity; let children own their data Prefer IDs and primitives over domain objects. A child selects what it needs from the repository's cached data layer, owns its loading/empty behavior, and returns `null` when it has nothing to render. ```tsx type Props = { memberId: string; className?: string }; export function MemberRow({ memberId, className }: Props) { const member = useMember(memberId); if (!member) return null; return <li className={cn("flex items-center", className)}>{member.email}</li>; } ``` When siblings need the same entity, share a colocated selector hook over the same query/cache rather than threading the object through the tree. Route-aware code owns URL reads/writes and passes values plus callbacks into route-agnostic l