Frontend · Claude Code (via permissions.deny)
React 19 & Vite .claudeignore
A .claudeignore for React 19 & Vite: the paths Claude Code should stay out of, with matching permissions.deny rules.
- Path
- .claudeignore
- Loads
- Pattern list
- Format
- gitignore syntax
- Used by
- Claude Code (via permissions.deny)
What this file tells the agent
Claude Code reads files while it works. This .claudeignore keeps the list of React 19 & Vite paths it should stay out of (build output, large binaries, logs and secrets). Copy the sensitive ones into permissions.deny in .claude/settings.json, which Claude Code enforces.
- Use React 19 action hooks (useActionState, useOptimistic, useFormStatus) for async mutations.
- Never forwardRef; pass ref directly as a standard component prop in React 19.
- Ban redundant useEffect state synchronization; calculate derived state synchronously during render.
- Separate server state (TanStack Query/SWR) from ephemeral UI state (useState).
- Do not use React.FC typing; declare explicit component props interfaces.
Code to avoid, and what to write instead
The rule steers the agent away from the left and toward the right.
// Discouraged: Anti-pattern useEffect duplicating state
export function BadItems({ items, query }: any) {
const [filtered, setFiltered] = useState([]);
useEffect(() => {
setFiltered(items.filter((i: any) => i.name.includes(query)));
}, [items, query]);
return <ul>{filtered.map((i: any) => <li key={i.id}>{i.name}</li>)}</ul>;
}// Good: Derived state computed synchronously during render
export function FilteredItems({ items, query }: { items: Item[]; query: string }) {
const filtered = useMemo(
() => items.filter((i) => i.name.toLowerCase().includes(query.toLowerCase())),
[items, query]
);
return <ul>{filtered.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
}Install it in one command
- 01
Go to your project root
The file goes at .claudeignore, relative to the root.
- 02
Download the file
Run the command on the right. It downloads this preset and writes the file.
- 03
Make sure it gets used
Claude Code does not enforce .claudeignore by itself. Copy the sensitive paths into permissions.deny in .claude/settings.json, which it does enforce.
$ curl -fsSL "https://www.devscratchpad.tech/api/raw/claudeignore/react-19" -o ".claudeignore"
writes .claudeignore
.claudeignore
To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.
More for React 19 & Vite
Questions
- Does Claude Code honor .claudeignore?
- Not by itself. Claude Code enforces permission rules, so copy the sensitive paths into permissions.deny in .claude/settings.json, for example Read(./.env). Keep .claudeignore in the repository root as the reviewable list.
- What should I put in .claudeignore?
- Exclude large build caches, minified bundles, lockfiles, and environment files containing sensitive credentials.