/react-best-practices

name: react-best-practices
description: Client-side React performance optimization patterns.

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 |