react

---

name: react description: React rules for the project Applies to files matching: **/*.tsx.

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 Form primitives (Form, FormField, FormItem, FormLabel, FormControl, FormMessage) for form layout and error handling.
• Schema location: Co-locate small form schemas with the component; extract only when reused across modules.

Styling & Layout

• Class merging: Use the shared cn utility for conditional classes.
• Composition: Prefer smaller composed components over deeply nested JSX in a single component.

Configuration Access

• Client components: Always use useConfig() from @/components/config-provider to access site configuration in client components ("use client").
• Never import siteConfig directly in client components—it derives values from server-only environment variables. The ConfigProvider receives a serialized version that decouples client code from server secrets.