react-composition

Start with the installed React/framework version and nearby components. Preserve public behavior and fit the repository's server/client boundary; newer examples may rely on unavailable APIs. - Put state with the smallest owner that needs to change it. Derive values during render when they can be computed from current props/state. Use event handlers for user actions; reserve effects for synchronization with an external system. Check stale responses and cleanup when an effect does perform asynchronous work. - Replace a growing set of mutually exclusive boolean props with an explicit variant or composition when that clarifies actual callers. Prefer children/slots and small focused components over an all-purpose wrapper that hides important behavior. Do not create a compound-component framework for one simple control. - Keep one source of truth for controlled values. Document a component's controlled/uncontrolled contract if both are needed. Use stable data IDs for dynamic list keys; test insertion/reordering when state could attach to the wrong row. - Respect framework boundaries for data fetching and secrets. Do not move server-only credentials or fetch logic into a client component to fix an import error. Request independent data concurrently when the surrounding API supports it and doing so avoids a demonstrated waterfall. - Optimize a measured or evident bottleneck, not every render. Before adding memoization, check expensive work, unnecessary effects, context ownership and large client imports. Keep a simpler implementation when performance is already sufficient. Run the changed component's behavior tests and typecheck. For interaction changes use `browser-testing`; for layout/accessibility use `frontend-quality`. Validate the specific invariant: retained input after reordering, no duplicate request, correct dialog focus or a stable selection after async completion. Official references when deeper guidance is needed: - https://react.dev/learn/you-might-not-need-an-effect - https://react.dev/learn/sharing-state-between-components - https://react.dev/learn/rendering-lists - https://github.com/vercel-labs/agent-skills These are original Motif workflows, not a copied upstream React ruleset.