redpanda-data/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 |