react-best-practices

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