skills.rest
bilacchi
bilacchiCOMMUNITY
Explore all skills by this author →
GitHub

react-patterns

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React codebases often accumulate anti-patterns like derived state in useEffect, misplaced state, missing Suspense boundaries, and inaccessible markup. This Skill provides decision trees and idiomatic patterns so components are written and reviewed consistently against React 18/19 best practices. ## Core Features & Use Cases - Hooks and State Discipline: Enforces top-level hook usage, functional updaters, cleanup of subscriptions, and a decision tree for choosing useState, lifted state, Context, or external stores like Zustand and TanStack Query. - Server/Client Component Boundaries: Covers RSC composition, serializable props, Server Actions, React 19 form actions with useActionState, and optimistic UI with useOptimistic. - Composition, Performance, and Accessibility: Provides slot, compound component, and render prop recipes, guidance on when React.memo and virtualization actually help, and accessibility-first rules for semantic HTML and keyboard navigation. - Use Case: When reviewing a pull request that fetches data inside useEffect and stores derived totals in state, use this Skill to rewrite it with TanStack Query and render-time derivation. ## Quick Start Ask the assistant to review your React component file and apply the react-patterns rules for hooks, state placement, and data fetching.

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 parent-child sharing, and Context for low-frequency cross-tree values like theme or auth. Use an external store like Zustand only for high-frequency updates shared across the tree.

How do I fetch data in React without useEffect?▼

Use TanStack Query or SWR for client-side caching and invalidation, or await fetch directly in a Server Component for Next.js App Router. useEffect plus fetch causes race conditions and provides no cache, retry, or Suspense integration.

What is the difference between useActionState and useFormState in React 19?▼

useActionState is the React 19 hook imported from react for handling form action state and pending status. In React 18, the equivalent hook is useFormState imported from react-dom.

Can a Client Component import a Server Component?▼

No, a Client Component cannot import a Server Component directly. Instead, pass the Server Component as children or through props so the server renders it and the client receives the composed output.

When should I use React.memo for performance?▼

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

Why does my error boundary not catch errors in event handlers?▼

Error boundaries only catch errors thrown during render, lifecycle methods, and constructors of child components. Errors in event handlers or async code must be caught with try/catch and surfaced through state.

Related Skills

Explore More Software Engineering Skills→
shalevaminshalevamin

react-expert

Develop React 18+ applications with JSX, TSX, and Next.js App Router.

Community
Advanced
awfixers-stuffawfixers-stuff

preflight

Automate preflight checks for formatting, GN, presubmit, build, and tests.

Official
Intermediate
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced
jikimejikime
5

jikime-migration-angular-to-nextjs

Migrate Angular applications to Next.js 16 App Router architecture.

Community
Advanced