React Best Practices
Client-side React optimization patterns for Cloud UI. 29 rules organized by category and impact.
Activation Conditions
-
Performance optimization tasks
-
Component re-render issues
-
Bundle size concerns
-
useEffect/useMemo patterns
Rules by Category
Bundle Optimization (CRITICAL)
Rule Key Point
bundle-barrel-imports
Import from source files, not barrel index.ts
bundle-code-splitting
React.lazy
- Suspense for heavy components, conditional loads, deferred 3rd-party
bundle-preload
Preload critical resources
Re-render Prevention (HIGH)
Rule Key Point
rerender-memo
Memoize expensive computations
rerender-dependencies
Minimize hook dependency arrays
rerender-derived-state
Compute during render, not in effects
rerender-functional-setstate
setState(prev => ...) to avoid stale closures
rerender-lazy-state-init
useState(() => expensive()) not useState(expensive())
rerender-simple-expression-in-memo
Don't memoize trivial expressions
rerender-transitions
useTransition for non-urgent updates
rerender-defer-reads
Read URL params / storage inside callbacks, not at render
Rendering (MEDIUM)
Rule Key Point
rendering-conditional-render
Short-circuit with && / ternary, avoid render in effects
rendering-hoist-jsx
Move static JSX outside components
rendering-content-visibility
CSS content-visibility: auto for off-screen
rendering-activity
React <Activity> for hidden UI
rendering-animate-svg-wrapper
Wrap animated SVGs to isolate re-renders
rendering-svg-precision
Limit SVG coordinate precision
Async (MEDIUM)
Rule Key Point
async-suspense-boundaries
Granular <Suspense> boundaries
async-defer-await
Don't await non-blocking work
async-dependencies
Load deps in parallel, not sequentially
JavaScript (MEDIUM)
Rule Key Point
js-caching-patterns
Module-level Map caches for repeated calls + storage reads
js-batch-dom-css
Batch DOM reads/writes to avoid layout thrashing
js-index-maps
Pre-index arrays into Maps for O(1) lookups
js-length-check-first
Check .length before expensive operations
js-tosorted-immutable
Use .toSorted() / .toReversed() for immutable transforms
RegExp hoisting is enforced by Biome (useTopLevelRegex ).
Browser (MEDIUM)
Rule Key Point
client-event-listeners
Clean up event listeners in useEffect return
client-passive-event-listeners
{ passive: true } for scroll/touch handlers
Advanced (LOW)
Rule Key Point
advanced-event-handler-refs
Stable callback refs to avoid child re-renders
advanced-use-latest
useLatest pattern for always-current values in callbacks