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).