react-patterns

Zate's avatarfrom Zate

This skill should be used for React hooks, components, state management, performance, frontend TypeScript, Next.js, JSX/TSX, web UI components

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 3, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill provides a comprehensive set of idiomatic React and TypeScript patterns designed to accelerate frontend development. It focuses on delivering high-performance, maintainable code by leveraging modern best practices for React hooks, state management, and Next.js integration. By utilizing this skill, developers can ensure their web UI components are type-safe, optimized for speed, and follow industry-standard architectural patterns.

Use Cases

  • Case 1: Implementing custom React hooks to encapsulate complex logic, such as managing local storage or handling asynchronous API states with TypeScript.
  • Case 2: Optimizing frontend performance by applying memoization techniques like React.memo, useMemo, and useCallback to eliminate redundant component re-renders.
  • Case 3: Building scalable and type-safe UI components in Next.js projects using JSX/TSX to ensure robust code quality and better developer experience.
  • Case 4: Refactoring legacy class-based components or inefficient functional components into modern, idiomatic React patterns for improved readability.
namereact-patterns
descriptionThis skill should be used for React hooks, components, state management, performance, frontend TypeScript, Next.js, JSX/TSX, web UI components
whenToUseReact code, hooks, components, React performance, frontend development with React, Next.js, TypeScript frontend, JSX, TSX files
whenNotToUseNon-React code, Vue, Angular, Svelte, pure HTML/CSS design
- skillarchitecture-patterns
whencreating distinctive UI designs, production-grade interfaces, avoiding generic aesthetics
- pluginfrontend-design

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

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

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

Hooks

// 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

function 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