# React Patterns
> React component patterns, hooks, anti-patterns, and quality rules — with deterministic regex-based React anti-pattern detection for JSX, TSX, useState, useEffect, conditional hooks, key-prop anti-patterns, and context usage. Use proactively when reviewing React component files (.jsx, .tsx), enforcing hooks rules (no conditional hooks), catching key-prop anti-patterns in list rendering, or running a pre-review scan of React codebases. Run the checker for deterministic scanning.
- Skill: `everyone-needs-a-copilot/react-patterns` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add everyone-needs-a-copilot/react-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/everyone-needs-a-copilot/react-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Everyone-Needs-A-Copilot (https://skillmd.com/u/everyone-needs-a-copilot)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/everyone-needs-a-copilot/react-patterns
---
# React Patterns
Modern React patterns, hooks best practices, anti-patterns, and quality rules.
## Core Principles
| Principle | Description |
|-----------|-------------|
| **Composition** | Small, focused components over inheritance |
| **Unidirectional** | Data flows down, events flow up |
| **Declarative** | Describe what, not how |
| **Hooks** | Functional components with hooks over class components |
## Component Patterns
### Functional Components
```tsx
// GOOD: Typed functional component
interface ButtonProps {
label: string;
onClick: () => void;
variant?: 'primary' | 'secondary';
disabled?: boolean;
}
export function Button({
label,
onClick,
variant = 'primary',
disabled = false,
}: ButtonProps) {
return (
);
}
// BAD: Class component (outdated)
class Button extends React.Component { }
```
### Composition Over Props Drilling
```tsx
// GOOD: Compound components
function Card({ children }: { children: React.ReactNode }) {
return {children}
;
}
Card.Header = function CardHeader({ children }: { children: React.ReactNode }) {
return {children}
;
};
Card.Body = function CardBody({ children }: { children: React.ReactNode }) {
return {children}
;
};
// Usage
Title
Content
```
### Render Props / Children as Function
```tsx
// GOOD: Flexible render pattern
interface DataFetcherProps {
url: string;
children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode;
}
function DataFetcher({ url, children }: DataFetcherProps) {
const { data, loading, error } = useFetch(url);
return <>{children(data, loading, error)};
}
// Usage
url="/api/users">
{(users, loading, error) => {
if (loading) return ;
if (error) return ;
return ;
}}
```
## Hooks Best Practices
### useState
```tsx
// GOOD: Typed state
const [user, setUser] = useState(null);
const [items, setItems] = useState([]);
// GOOD: Functional updates for derived state
setCount(prev => prev + 1);
setItems(prev => [...prev, newItem]);
// BAD: Object mutation
setUser({ ...user, name: 'New' }); // Works but...
user.name = 'New'; // NEVER mutate directly!
setUser(user);
```
### useEffect
```tsx
// GOOD: Proper dependency array
useEffect(() => {
const controller = new AbortController();
async function fetchData() {
try {
const response = await fetch(url, { signal: controller.signal });
setData(await response.json());
} catch (error) {
if (!controller.signal.aborted) {
setError(error as Error);
}
}
}
fetchData();
return () => controller.abort();
}, [url]); // Re-run when url changes
// BAD: Missing dependencies
useEffect(() => {
fetchData(userId); // userId not in deps - stale closure!
}, []);
// BAD: Object/array in deps (always new reference)
useEffect(() => {
doSomething(options);
}, [options]); // Infinite loop if options = {} inline
```
### useMemo / useCallback
```tsx
// GOOD: Expensive computation
const sortedItems = useMemo(
() => items.sort((a, b) => a.name.localeCompare(b.name)),
[items]
);
// GOOD: Stable callback for child props
const handleClick = useCallback(
(id: string) => {
onSelect(id);
},
[onSelect]
);
// BAD: Premature optimization
const double = useMemo(() => value * 2, [value]); // Too simple
// BAD: No deps for callback
const handleClick = useCallback(() => {
onSelect(selectedId); // selectedId is stale!
}, []);
```
### Custom Hooks
```tsx
// GOOD: Extract reusable logic
function useLocalStorage(key: string, initialValue: T) {
const [value, setValue] = useState(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue] as const;
}
// Usage
const [theme, setTheme] = useLocalStorage('theme', 'light');
```
## Anti-Patterns to Avoid
### Index as Key
```tsx
// BAD: Index key causes render issues
{items.map((item, index) => (