react-patterns

Q: How do I install react-patterns?

Run npx skills add https://github.com/oakoss/agent-skills --skill react-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/react-patterns/ (personal) or .claude/skills/react-patterns/ (project).

by oakossFrontend & Design

React 19+ patterns, performance optimization, and component architecture. Covers hooks, state management decision trees, data fetching with use() API, Server Components, React Compiler, bundle optimization, and re-render elimination. Use when building components, optimizing re-renders, fetching data, managing state, handling forms, structuring frontends, or reviewing React code.

Installs: 181
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/oakoss/agent-skills --skill react-patterns

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads react-patterns automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

React

Overview

Covers component architecture, performance optimization, state management, data fetching, and modern React 19+ APIs. Prioritizes React Compiler compatibility, Server Components, and elimination of data fetching waterfalls.

When to use: Building React applications, optimizing performance, choosing state management, implementing data fetching, reviewing component architecture.

When NOT to use: Non-React frameworks, purely server-side rendering without React, static sites without interactivity.

Quick Reference

Pattern	API / Approach	Key Points
Data fetching	`use(dataPromise)`	Replaces useEffect+useState fetch pattern
Form handling	`useActionState(action, init)`	Built-in pending states and error handling
Optimistic UI	`useOptimistic(state, updateFn)`	Instant feedback while server processes
Non-urgent updates	`useTransition()`	Mark updates as interruptible
Effect events	`useEffectEvent(fn)`	Reactive values without re-triggering effects
Form pending status	`useFormStatus()`	Read parent form pending state from child component
Unique IDs	`useId()`	Hydration-safe IDs for accessibility
Server state	React Query / `useSuspenseQuery`	Caching, deduplication, background refetch
Client state (local)	`useState` / `useRef`	Single component or transient values
Client state (global)	Zustand / Context	Cross-component client-only state
Derived state	Compute during render	Never sync derived values with effects
Lazy initialization	`useState(() => expensive())`	Avoid eager computation on every render
Component types	Page, Feature, UI	Route entry, business logic, reusable primitives
Memoization	Trust React Compiler first	Manual useMemo/useCallback only when needed
Ref as prop	`ref` prop on function components	No `forwardRef` needed in React 19
Ref cleanup	Return function from ref callback	Cleanup runs on detach instead of `null` call
Code splitting	`React.lazy()` + Suspense	Lazy-load heavy components
Parallel fetches	`Promise.all()`	Eliminate sequential await waterfalls
Request dedup	`React.cache()`	Per-request server-side deduplication
Abort server work	`cacheSignal()`	Cancel expensive async work when client disconnects
Resource preloading	`prefetchDNS`, `preconnect`, `preload`, `preinit`	Optimize resource loading from components
State preservation	`<Activity>`	Hide UI while keeping state mounted

Common Mistakes

Mistake	Correct Pattern
Fetching data in useEffect with useState	Use the `use()` API or React Query for data fetching with built-in caching
Storing derived values in state and syncing with effects	Compute derived values during render; never use effects for state synchronization
Wrapping everything in useMemo and useCallback	Trust React Compiler first; only add manual memoization for expensive computations or memoized children
Using `array.sort()` which mutates state	Use `array.toSorted()` for immutable sorting to avoid unexpected re-renders
Using `&&` for conditional rendering	Use ternary `condition ? <Component /> : null` to avoid rendering falsy values like `0`
Using Math.random() or Date for IDs	Use `useId()` for hydration-safe unique identifiers
Putting reactive values in effect deps to read latest value	Use `useEffectEvent` to access latest values without re-triggering effects
Creating object literals as effect dependencies	Hoist static objects outside the component or use primitive dependencies
Using `forwardRef` in React 19 projects	Pass `ref` directly as a prop; `forwardRef` is deprecated in React 19
Mutating props or state during render	Follow Rules of React for React Compiler compatibility: pure renders, no side effects

Delegation

Explore component architecture and identify performance bottlenecks: Use Explore agent to profile re-renders, analyze bundle size, and trace data fetching waterfalls
Implement React feature with proper patterns: Use Task agent to build components following Server Component, Suspense, and React 19 conventions
Design frontend architecture and state management strategy: Use Plan agent to structure component hierarchy, select state management, and plan data fetching approach

If the shadcn-ui skill is available, delegate component variant and theming questions to it. If the tailwind skill is available, delegate utility-first styling and design token questions to it. If the zustand skill is available, delegate global client state management questions to it.

References

Component patterns, state management, and useEffect decisions
Performance optimization: waterfalls, bundles, and re-renders
Hooks, Server Actions, and React 19 APIs
React Compiler patterns and re-render optimization
Server-side rendering and React Server Components
Anti-patterns and troubleshooting guide

FAQ

What does the react-patterns skill do?

How do I install react-patterns?

Run npx skills add https://github.com/oakoss/agent-skills --skill react-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/react-patterns/ (personal) or .claude/skills/react-patterns/ (project).

Which AI agents can use react-patterns?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is react-patterns safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains react-patterns?

It is published by oakoss in oakoss/agent-skills. It has 181 recorded installs.

More from oakoss/agent-skills

View all →

ui-ux-polish

oakoss/agent-skills

Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.

Frontend & Design541 installs