react

name	react
description	Skill: 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 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.
• Responsive design: Prefer Tailwind responsive classes (md:hidden, hidden md:flex, etc.) over JS-based checks like isMobile. Use isMobile from useSidebar() only when CSS cannot handle the logic (e.g., conditional rendering that affects data fetching or complex state).