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 |
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4k