skills.rest
gagandeepgill
gagandeepgillCOMMUNITY
Explore all skills by this author →
GitHub

react-patterns

Guides writing and reviewing React 18/19 components using hooks discipline, RSC boundaries, and composition patterns.

1|Updated Aug 31, 2026
Search Tags:#code review#accessibility#state management#react#data fetching#hooks#server components
One-click install
npx skills add https://github.com/gagandeepgill/puzzle-game --skill react-patterns-gagandeepgill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/gagandeepgill/puzzle-game/tree/main/.claude/skills/react-patterns
Command: npx skills add https://github.com/gagandeepgill/puzzle-game --skill react-patterns-gagandeepgill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React codebases accumulate subtle bugs from derived state in effects, misplaced state, missing cleanup, and ad-hoc data fetching. This Skill provides a decision framework and concrete patterns for writing idiomatic React 18/19 components that avoid these pitfalls. ## Core Features & Use Cases - Hooks Discipline & State Decisions: Enforces top-level hooks, cleanup of subscriptions, functional updaters, and a decision tree for choosing between useState, lifted state, Context, and external stores like Zustand or TanStack Query. - Server/Client Component Boundaries: Covers RSC composition rules, React 19 form actions with useActionState, useOptimistic, and Suspense plus error boundary placement. - Composition & Performance Recipes: Provides slot, compound component, and render prop patterns, plus guidance on when React.memo, context splitting, and list virtualization actually help. - Use Case: When reviewing a TSX pull request, apply the state location decision tree and data fetching matrix to flag useEffect-based fetching and derived state stored in useState. ## Quick Start Ask the assistant to review your React component or design a new one using the react-patterns skill, for example by requesting a form built with React 19 actions and proper error boundaries.

Frequently Asked Questions about react-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between useState, Context, and Zustand in React?▼

Use useState for single-component state, lift state to the nearest common ancestor for shared parent-child state, and Context for low-frequency cross-tree values like theme or auth. High-frequency updates shared across the tree belong in an external store such as Zustand or Redux Toolkit.

How to fetch data in React without useEffect?▼

Use TanStack Query or SWR for client-side caching and invalidation, or await fetch directly in React Server Components for per-request data. Avoid useEffect plus fetch because it introduces race conditions, no cache, no retry, and no Suspense integration.

When should I use React.memo for performance?▼

Apply React.memo only when a component re-renders frequently, its props are usually unchanged between renders, and its render is measurably expensive. If props differ on most renders, the equality check is pure overhead.

Can a Client Component import a Server Component in Next.js?▼

No, a Client Component cannot import a Server Component directly. Instead, compose them by passing the Server Component as children or through serializable props from a Server Component parent.

Why is storing derived state in useEffect a problem?▼

Derived state stored via useEffect adds an extra render cycle, can desynchronize from source data, and obscures data flow. Compute derived values directly during render instead, such as reducing items into a total inside the component body.

Related Skills

Explore More Software Engineering Skills→
KlotzJesseKlotzJesse

react-dev

Create type-safe React components and hooks in TypeScript for React 18/19.

Community
Intermediate
PicoMLXPicoMLX

react-component-performance

Profile React components with React DevTools and apply memoization to reduce re-renders.

Official
Intermediate
MARUCIEMARUCIE
1

accessibility

Build and audit UI components for WCAG AA conformance with semantic HTML, ARIA, and keyboard support.

Community
Intermediate
janpeterdjanpeterd

tanstack-store

Implement immutable reactive state management with TanStack store primitives.

Community
Intermediate