OpenSkillIndex← back to search
claude-codedevelopment

Claude-skills react-patterns

React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React 19 APIs. Use when writing, reviewing, or refactoring React components. Triggers: 'react patterns', 'react review', 'react performance', 'optimise components', 'react best practices', 'composition patterns', 'why is it slow', 'reduce re-renders', 'fix waterfall'.

install
source · Clone the upstream repo
git clone https://github.com/jezweb/claude-skills
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/jezweb/claude-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/plugins/frontend/skills/react-patterns" ~/.claude/skills/jezweb-claude-skills-react-patterns && rm -rf "$T"
manifest: plugins/frontend/skills/react-patterns/SKILL.md
tags
#react#performance#vite#cloudflare#code-review#refactoring
source content

React Patterns

Performance and composition patterns for React 19 + Vite + Cloudflare Workers projects. Use as a checklist when writing new components, a review guide when auditing existing code, or a refactoring playbook when something feels slow or tangled.

Rules are ranked by impact. Fix CRITICAL issues before touching MEDIUM ones.

When to Apply

  • Writing new React components or pages
  • Reviewing code for performance issues
  • Refactoring components with too many props or re-renders
  • Debugging "why is this slow?" or "why does this re-render?"
  • Building reusable component libraries
  • Code review before merging

1. Eliminating Waterfalls (CRITICAL)

Sequential async calls where they could be parallel. The #1 performance killer.

PatternProblemFix
Await in sequence
const a = await getA(); const b = await getB();
const [a, b] = await Promise.all([getA(), getB()]);
Fetch in childParent renders, then child fetches, then grandchild fetchesHoist fetches to the highest common ancestor, pass data down
Suspense cascadeMultiple Suspense boundaries that resolve sequentiallyOne Suspense boundary wrapping all async siblings
Await before branch
const data = await fetch(); if (condition) { use(data); }
Move await inside the branch — don't fetch what you might not use
Import then render
const Component = await import('./Heavy'); return <Component />
Use 
React.lazy()
+ 
<Suspense>
— renders fallback instantly

How to find them: Search for 

await
in components. Each 
await
is a potential waterfall. If two awaits are independent, they should be parallel.

2. Bundle Size (CRITICAL)

Every KB the user downloads is a KB they wait for.

PatternProblemFix
Barrel imports
import { Button } from '@/components'
pulls the entire barrel file
import { Button } from '@/components/ui/button'
— direct import
No code splittingHeavy component loaded on every page
React.lazy(() => import('./HeavyComponent'))
+ 
<Suspense>
Third-party at loadAnalytics/tracking loaded before the app rendersLoad after hydration: 
useEffect(() => { import('./analytics') }, [])
Full library import
import _ from 'lodash'
(70KB)
import debounce from 'lodash/debounce'
(1KB)
Lucide tree-shaking
import * as Icons from 'lucide-react'
(all icons)		Explicit map: 
import { Home, Settings } from 'lucide-react'
Duplicate ReactLibrary bundles its own React → "Cannot read properties of null"
resolve.dedupe: ['react', 'react-dom']
in vite.config.ts

How to find them: 

npx vite-bundle-visualizer
— shows what's in your bundle.

3. Composition Architecture (HIGH)

How you structure components matters more than how you optimise them.

PatternProblemFix
Boolean prop explosion
<Card isCompact isClickable showBorder hasIcon isLoading>
Explicit variants: 
<CompactCard>
, 
<ClickableCard>
Compound componentsComplex component with 15 propsSplit into 
<Dialog>
, 
<Dialog.Trigger>
, 
<Dialog.Content>
with shared context
renderX props
<Layout renderSidebar={...} renderHeader={...} renderFooter={...}>
Use children + named slots: 
<Layout><Sidebar /><Header /></Layout>
Lift stateSibling components can't share stateMove state to parent or context provider
Provider implementationConsumer code knows about state management internalsProvider exposes interface 
{ state, actions, meta }
— implementation hidden
Inline components
function Parent() { function Child() { ... } return <Child /> }
Define Child outside Parent — inline components remount on every render

The test: If a component has more than 5 boolean props, it needs composition, not more props.

4. Re-render Prevention (MEDIUM)

Not all re-renders are bad. Only fix re-renders that cause visible jank or wasted computation.

PatternProblemFix
Default object/array props
function Foo({ items = [] })
→ new array ref every render		Hoist: 
const DEFAULT = []; function Foo({ items = DEFAULT })
Derived state in effect
useEffect(() => setFiltered(items.filter(...)), [items])
Derive during render: 
const filtered = useMemo(() => items.filter(...), [items])
Object dependency
useEffect(() => {...}, [config])
fires every render if config is 
{}
Use primitive deps: 
useEffect(() => {...}, [config.id, config.type])
Subscribe to unused stateComponent reads 
{ user, theme, settings }
but only uses 
user
Split context or use selector: 
useSyncExternalStore
State for transient values
const [mouseX, setMouseX] = useState(0)
on mousemove		Use 
useRef
for values that change frequently but don't need re-render
Inline callback props
<Button onClick={() => doThing(id)} />
— new function every render
useCallback
or functional setState: 
<Button onClick={handleClick} />

How to find them: React DevTools Profiler → "Why did this render?" or 

<React.StrictMode>
double-renders in dev.

5. React 19 Specifics (MEDIUM)

Patterns that changed or are new in React 19.

PatternOld (React 18)New (React 19)
Form state
useFormState
useActionState
— renamed
Ref forwarding
forwardRef((props, ref) => ...)
function Component({ ref, ...props })
— ref is a regular prop
Context
useContext(MyContext)
use(MyContext)
— works in conditionals and loops
Pending UIManual loading state
useTransition
+ 
startTransition
for non-urgent updates
Route-level lazyWorks with 
createBrowserRouter
only		Still true — 
<Route lazy={...}>
is silently ignored with 
<BrowserRouter>
Optimistic updatesManual state management
useOptimistic
hook
MetadataHelmet or manual 
<head>
management
<title>
, 
<meta>
, 
<link>
in component JSX — hoisted to 
<head>
automatically

6. Rendering Performance (MEDIUM)

PatternProblemFix
Layout shift on loadContent jumps when async data arrivesSkeleton screens matching final layout dimensions
Animate SVG directlyJanky SVG animationWrap in 
<div>
, animate the div instead
Large list rendering1000+ items in a table/list
@tanstack/react-virtual
for virtualised rendering
content-visibilityLong scrollable content renders everything upfront
content-visibility: auto
on off-screen sections
Conditional render with &&
{count && <Items />}
renders 
0
when count is 0		Use ternary: 
{count > 0 ? <Items /> : null}

7. Data Fetching (MEDIUM)

PatternProblemFix
No deduplicationSame data fetched by 3 componentsTanStack Query or SWR — automatic dedup + caching
Fetch on mount
useEffect(() => { fetch(...) }, [])
— waterfalls, no caching, no dedup		TanStack Query: 
useQuery({ queryKey: ['users'], queryFn: fetchUsers })
No optimistic updateUser clicks save, waits 2 seconds, then sees change
useMutation
with 
onMutate
for instant visual feedback
Stale closure in interval
setInterval
captures stale state
useRef
for the interval ID and current values
Polling without cleanup
setInterval
in useEffect without 
clearInterval
Return cleanup: 
useEffect(() => { const id = setInterval(...); return () => clearInterval(id); })

8. Vite + Cloudflare Specifics (MEDIUM)

PatternProblemFix
import.meta.env
in Node scripts		Undefined — only works in Vite-processed filesUse 
loadEnv()
from vite
React duplicate instanceLibrary bundles its own React
resolve.dedupe
+ 
optimizeDeps.include
in vite.config.ts
Radix Select empty string
<SelectItem value="">
throws		Use sentinel: 
<SelectItem value="__any__">
React Hook Form null
{...field}
passes null to Input		Spread manually: 
value={field.value ?? ''}
Env vars at edge
process.env
doesn't exist in Workers		Use 
c.env
(Hono context) or 
import.meta.env
(Vite build-time)

Using as a Review Checklist

When reviewing code, go through categories 1-3 (CRITICAL + HIGH) for every PR. Categories 4-8 only when performance is a concern.

/react-patterns [file or component path]

Read the file, check against rules in priority order, report findings as:

file:line — [rule] description of issue