React

Components

• Prefer function components: Use React function components with hooks over class components.
• Client vs server: Mark interactive components with "use client" at the top of the file; keep non-interactive logic in server components or libraries.
• No default exports: Use named exports for all components.

Hooks

• Hook ordering: Follow the standard rules of hooks; no conditional or looped hooks.
• Derived state: Prefer deriving values from props/form state instead of duplicating them in useState.
• Effects: Keep useEffect minimal and side effect focused; avoid using it for basic data derivation.

Forms

• Validation: Use react-hook-form + Zod for all non-trivial forms.
• UI primitives: Prefer shadcn primitives (, , , , , ) for form layout and error handling.