React Cursor Rules Template
Cursor is remarkably good at writing React — and remarkably confident when it writes React badly. Left unguided, it will reach for patterns that were idiomatic in 2020: class components in older codebases it half-remembers, useEffect chains for data fetching, prop drilling where a context or a custom hook belongs. A React rules file is how you pin Cursor to the way React is actually written today.
The rules below encode the conventions that keep AI-generated React maintainable: feature-based file organization, functional components with hooks, and state that lives at the right distance from the components that read it. Copy them as-is, or open the generator to adjust style details like quotes and semicolons before downloading.
The Complete React Cursor Rules
The full rule set in all three formats Cursor understands — copy the one your project uses. Project Rules (.mdc) load per-file via globs, AGENTS.md is portable across AI tools, and .cursorrules is the legacy single-file format.
Replacing a legacy file? Read the guide to migrate .cursorrules to Cursor Project Rules (.mdc) before copying this template into your project.
---
description: "Project Structure"
alwaysApply: false
---
- Organize components by feature, not by file type.
- Use spaces for indentation.
- Group related components in a shared directory.
- Keep components small and focused on a single responsibility.
- Use PascalCase for component filenames and component names.---
description: "Component Patterns"
alwaysApply: false
---
- Prefer functional components with hooks over class components.
- Use React.memo for performance optimization when needed.
- Extract reusable logic into custom hooks.
- Keep JSX readable: break complex expressions into variables.
- Use TypeScript for type safety.
- Always define prop types or interfaces for components.---
description: "State Management"
alwaysApply: false
---
- Use useState for local component state.
- Use useContext + useReducer for shared state.
- Lift state up only when necessary.
- Avoid prop drilling by using composition or context.
- Use useCallback/useMemo sparingly — only when profiling shows a need.
- Prefer controlled components for form inputs.---
description: "Side Effects & Effects"
alwaysApply: false
---
- Use useEffect for side effects like data fetching.
- Always provide cleanup functions for subscriptions.
- Use the dependency array correctly: include all referenced values.
- Avoid useEffect for derived state: compute values during render instead.
- Use AbortController for fetch cleanup.Customize These Rules
The generator below is preloaded with the React template. Adjust indentation, quotes, naming, add your own rules, then download — no need to start from scratch on the homepage.
What This Template Covers
Required guidance
- - Project Structure
- - Component Patterns
- - State Management
- - Side Effects & Effects
Default style
- - Indentation: 2 spaces
- - Quotes: single
- - Semicolons: disabled
- - Naming: camelCase
Why These Rules
Why the rules ban useEffect for data fetching
The single most common failure mode of AI-generated React is the useEffect-plus-useState fetch: no request cancellation, no cache, a loading flag that goes stale on unmount, and a dependency array that either over-fires or silently under-fires. The React team itself now steers developers away from effects for data loading.
Telling Cursor to route data fetching through your query layer (React Query, SWR, or a framework loader) eliminates the whole bug class at generation time instead of in code review. If your project genuinely needs a raw effect — subscribing to a browser API, syncing with a non-React widget — the rule still allows it; it targets data fetching specifically.
Hooks rules exist because Cursor cannot see your render tree
Cursor reasons file-by-file. It does not know that the component it is editing re-renders forty times a second because of a parent, which is why unguided suggestions sprinkle React.memo and useCallback everywhere or nowhere. The template takes a position: extract reusable logic into custom hooks, memoize only at measured hot spots, and keep effects small enough that their dependency arrays stay honest.
The dependency-array rule matters more than it looks. When Cursor generates an effect with a missing dependency, the bug ships silently — nothing crashes, the UI just goes subtly stale. Making "exhaustive deps, no eslint-disable" an explicit rule means Cursor restructures the code instead of suppressing the linter.
Feature folders over type folders
The template organizes code by feature (a folder owns its components, hooks, and tests) rather than by file type (a global components/ bucket). For AI-assisted work this is not just taste: when Cursor opens a feature folder, everything relevant to the change sits inside its context window. Type-based layouts scatter one feature across four directories, and Cursor will confidently edit three of them while missing the fourth.
What changed with React 19
If you are on React 19, two defaults in older community rules files are now wrong. First, forwardRef is legacy — ref is a regular prop, and rules that tell Cursor to wrap components in forwardRef generate noise. Second, the compiler makes most manual useMemo/useCallback unnecessary, so the template treats memoization as an opt-in optimization rather than a default.
Server Components are the other line to draw. This template covers client-side React. If you use React through Next.js App Router, generate the combined React + Next.js rule set instead — the boundary rules ("use client" placement, what may import what) live in the Next.js template.
Common React Stack Combinations
Real projects rarely use React alone. Each combination below opens the generator with the matching templates preselected, merged and deduplicated into one rule set.
Frequently Asked Questions
- Will these rules conflict with my ESLint or Prettier setup?
- No — they operate at a different layer. ESLint and Prettier correct code after it exists; Cursor rules shape what the AI writes in the first place. Keep both. If your ESLint config disagrees with a style detail here (say, semicolons), set the same preference in the generator so the two never fight.
- Do I need different rules for React 18 and React 19?
- The core rules are identical. On React 19 you can drop forwardRef guidance and rely on the compiler instead of manual memoization; on React 18 keep React.memo advice for measured hot paths. The generated file works on both — delete the memoization bullet if the compiler handles it for you.
- Should the rules go in .cursor/rules or AGENTS.md for a React project?
- For a React-only repository, Project Rules (.mdc) with a glob like src/**/*.tsx is the better default: component conventions then load only when Cursor touches component files, keeping the rest of your context window free. Choose AGENTS.md when teammates also use Codex, Copilot, or other agents that read the portable format.
- How do I add my own state-management conventions?
- Generate the React rule set, then add a custom rule in step 4 of the generator — for example "Global state lives in Zustand stores under src/stores; never introduce Redux". Custom rules export into every output format alongside the template rules.