React Best Practices Guardian
Cursor.cursorrulesCoding
Enforces modern React patterns: server components, proper hooks usage, and performance-first composition.
Get this skill
Add the skill file with the CLI, by hand, or over MCP.Save this to your project or home directory so Cursor can load it.
npx goodprompts add react-best-practices-guardianSaves to
./.cursorrulesnpx goodprompts add react-best-practices-guardianSaves to
./.cursorrulesSkill file
.cursorrules1,434 characters# React Best Practices
## Components
- Default to Server Components. Only add "use client" when you need interactivity, browser APIs, or hooks.
- Keep components small (under 80 lines). Extract sub-components when complexity grows.
- Co-locate related files: `component.tsx`, `component.test.tsx`, `component.css`.
- Name components with PascalCase. Name files with kebab-case.
## Hooks
- Never call hooks conditionally or inside loops.
- Custom hooks must start with `use` and encapsulate a single concern.
- Prefer `useReducer` over `useState` when state transitions are complex.
- Memoize expensive computations with `useMemo`, not all computations.
- Avoid `useEffect` for derived state — compute it during render instead.
## State Management
- Lift state only as high as needed, not higher.
- Use URL search params for filter/sort state.
- Server state belongs in React Query / tRPC, not local state.
- Form state belongs in the form library (React Hook Form), not global state.
## Performance
- Use React.lazy() for route-level code splitting.
- Avoid creating objects/arrays in JSX props — they cause re-renders.
- Prefer `children` prop over render props for composition.
- Never use array index as key for dynamic lists.
## Testing
- Test behavior, not implementation.
- Use Testing Library queries in priority order: getByRole > getByLabelText > getByText.
- Mock at the network boundary (MSW), not at the module level.