| name | react |
| description | React component patterns — Tailwind styling, size, explicit props, useMemo, useEffect, hooks. Use when writing or reviewing React components, views, or hooks in the frontend. Don't use for non-React JS/TS (use javascript), folder placement (use folder-structure), or general size limits outside components (use code-standards). |
React
Apply these patterns to React in frontend/src. For where a file belongs, invoke folder-structure in full. For general size and shape, invoke code-standards in full.
Reference — component rules
Tailwind first
Style with Tailwind utility classes in JSX. Add a CSS file only for animations or styles Tailwind cannot express cleanly.
Component size
Keep each component at most 30 lines with one clear responsibility. When it grows, extract cohesive children — split for clarity, not to game the line count.
Explicit props
Pass only the props the component uses. Treat a full prop spread as an explicit, documented API choice.
export function TextField({ value, onChange, placeholder }: TextFieldProps) {
return <input value={value} onChange={onChange} placeholder={placeholder} />;
}
useMemo for real cost
Memoize derived values that are expensive or whose stable identity prevents wasted renders. List every dependency. Skip useMemo for trivial expressions.
Effects for externals
Use useEffect to sync with external systems (APIs, subscriptions, timers, DOM). Derive values during render instead of mirroring props/state into effects. Keep each effect small, dependency-complete, and cleaned up.
const fullName = `${firstName} ${lastName}`;
Hooks named use…
Name custom hooks with a use prefix that describes the encapsulated behavior. Call hooks only at the top level of a component or another hook.
Behavior in hooks
Keep components on composition and presentation. Move state, effects, service calls, and reusable interactions into purpose-specific hooks under frontend/src/hooks. HTTP calls stay in services.
Reference — review gate
Before finishing a React change, confirm: Tailwind styling, ≤30-line components, explicit props, justified useMemo, external-only effects with cleanup, use-prefixed hooks, and non-presentational behavior extracted to hooks.
