---

name: react-patterns description: This skill should be used for React hooks, components, state management, performance, frontend TypeScript, Next.js, JSX/TSX, web UI components whenToUse: React code, hooks, components, React performance, frontend development with React, Next.js, TypeScript frontend, JSX, TSX files whenNotToUse: Non-React code, Vue, Angular, Svelte, pure HTML/CSS design seeAlso:

• skill: testing-strategies when: writing React tests
• skill: architecture-patterns when: structuring large React apps
• plugin: frontend-design when: creating distinctive UI designs, production-grade interfaces, avoiding generic aesthetics

---

React Patterns

Idiomatic React/TypeScript patterns.

Tip: For high-quality UI design beyond code patterns, consider the frontend-design plugin if installed (/frontend-design).

Functional Components

Copyinterface Props {
  name: string;
  onClick: () => void;
}

const Button: React.FC<Props> = ({ name, onClick }) => (
  <button onClick={onClick}>{name}</button>
);

Hooks

Copy// State
const [count, setCount] = useState(0);

// Effect with cleanup
useEffect(() => {
  const timer = setInterval(() => tick(), 1000);
  return () => clearInterval(timer);
}, []);

// Memoization
const expensive = useMemo(() => compute(data), [data]);
const handler = useCallback(() => doThing(id), [id]);

Custom Hooks

Copyfunction useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

Performance

• Use React.memo for expensive components
• Avoid inline objects/functions in props
• Use key prop correctly in lists