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.

Pattern

Problem

Fix

Await in sequence

const a = await getA(); const b = await getB();

const [a, b] = await Promise.all([getA(), getB()]);

Fetch in child

Parent renders, then child fetches, then grandchild fetches

Hoist fetches to the highest common ancestor, pass data down

Suspense cascade

Multiple Suspense boundaries that resolve sequentially

One 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.

Pattern

Problem

Fix

Barrel imports

import { Button } from '@/components' pulls the entire barrel file

import { Button } from '@/components/ui/button' — direct import

No code splitting

Heavy component loaded on every page

React.lazy(() => import('./HeavyComponent')) + <Suspense>

Third-party at load

Analytics/tracking loaded before the app renders

Load 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 React

Library 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.

Pattern

Problem

Fix

Boolean prop explosion

<Card isCompact isClickable showBorder hasIcon isLoading>

Explicit variants: <CompactCard>, <ClickableCard>

Compound components

Complex component with 15 props

Split into <Dialog>, <Dialog.Trigger>, <Dialog.Content> with shared context

renderX props

<Layout renderSidebar={...} renderHeader={...} renderFooter={...}>

Use children + named slots: <Layout><Sidebar /><Header /></Layout>

Lift state

Sibling components can't share state

Move state to parent or context provider

Provider implementation

Consumer code knows about state management internals

Provider 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.

Pattern

Problem

Fix

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 state

Component 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.

Pattern

Old (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 UI

Manual loading state

useTransition + startTransition for non-urgent updates

Route-level lazy

Works with createBrowserRouter only

Still true — <Route lazy={...}> is silently ignored with <BrowserRouter>

Optimistic updates

Manual state management

useOptimistic hook

Metadata

Helmet or manual <head> management

<title>, <meta>, <link> in component JSX — hoisted to <head> automatically

6. Rendering Performance (MEDIUM)

Pattern

Problem

Fix

Layout shift on load

Content jumps when async data arrives

Skeleton screens matching final layout dimensions

Animate SVG directly

Janky SVG animation

Wrap in <div>, animate the div instead

Large list rendering

1000+ items in a table/list

@tanstack/react-virtual for virtualised rendering

content-visibility

Long scrollable content renders everything upfront

content-visibility: auto on off-screen sections

Conditional render with &&

{count &#x26;&#x26; <Items />} renders 0 when count is 0

Use ternary: {count > 0 ? <Items /> : null}

7. Data Fetching (MEDIUM)

Pattern

Problem

Fix

No deduplication

Same data fetched by 3 components

TanStack 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 update

User 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)

Pattern

Problem

Fix

**import.meta.env in Node scripts**

Undefined — only works in Vite-processed files

Use loadEnv() from vite

React duplicate instance

Library 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