Agent skill · software engineering · affaan-m
react-patterns
React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.
Why this skill is useful
Provides idiomatic patterns and decision trees for React 18/19 that enhance component design and state management, which the AI may not reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
React Patterns Idiomatic React 18/19 patterns for building robust, accessible, performant component trees. When to Activate Writing or modifying React function components, custom hooks, or component trees Reviewing JSX/TSX files Designing state shape or component composition Migrating class components or older forwardRef/useEffect-heavy code Choosing between local state, lifted state, context, and external stores Working with Server Components / Client Components (Next.js App Router, RSC) Implementing forms with React 19 actions or controlled inputs Wiring data fetching with TanStack Query / SWR / RSC Core Principles 1. Render is a Pure Function of Props and State Derived state in useEffect adds a render cycle, can desync, and obscures the data flow. 2. Side Effects Outside Render Effects, mutations, network calls, and subscriptions live in event handlers or useEffect — never in the render body. 3. Composition Over Inheritance React has no inheritance model for components. Compose with children, render props, or component props. Hooks Discipline See rules/react/hooks.md for the full ruleset. Highlights: Top-level only, never conditional Cleanup every subscription, interval, listener Functional updater (setX(prev => prev + 1)) when new state depends on old Default position: do not memoize — add useMemo/useCallback only when a profiler or a dependency chain proves it matters Extract a custom hook only when the same hook sequence appears in 2+ components State Location Decision Tree Most pages do not need context or a global store. Resist abstraction until duplicated lifting becomes painful. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/react-patterns