SKILL.md
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 |