React Best Practices (Airflow UI)
Performance optimization guide for client-side React, adapted from Vercel Engineering.
When to Apply
- •Writing or reviewing React components
- •Optimizing bundle size or re-renders
- •Refactoring existing Airflow UI code
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
| 3 | Client-Side Data | MEDIUM-HIGH | client- |
| 4 | Re-render Optimization | MEDIUM | rerender- |
| 5 | Rendering Performance | MEDIUM | rendering- |
| 6 | JavaScript Performance | LOW-MEDIUM | js- |
| 7 | Advanced Patterns | LOW | advanced- |
Quick Reference
1. Eliminating Waterfalls (CRITICAL)
- •
async-defer-await- Move await into branches where actually used - •
async-parallel- Use Promise.all() for independent operations - •
async-dependencies- Use better-all for partial dependencies - •
async-suspense-boundaries- Use Suspense to stream content
2. Bundle Size Optimization (CRITICAL)
- •
bundle-barrel-imports- Import directly, avoid barrel files - •
bundle-conditional- Load modules only when feature is activated
3. Client-Side Data (MEDIUM-HIGH)
- •
client-event-listeners- Deduplicate global event listeners - •
client-passive-event-listeners- Use passive listeners for scroll - •
client-localstorage-schema- Version and minimize localStorage data
4. Re-render Optimization (MEDIUM)
- •
rerender-defer-reads- Don't subscribe to state only used in callbacks - •
rerender-memo- Extract expensive work into memoized components - •
rerender-memo-with-default-value- Hoist default non-primitive props - •
rerender-dependencies- Use primitive dependencies in effects - •
rerender-derived-state- Subscribe to derived booleans, not raw values - •
rerender-derived-state-no-effect- Derive state during render, not effects - •
rerender-functional-setstate- Use functional setState for stable callbacks - •
rerender-lazy-state-init- Pass function to useState for expensive values - •
rerender-simple-expression-in-memo- Avoid memo for simple primitives - •
rerender-move-effect-to-event- Put interaction logic in event handlers - •
rerender-transitions- Use startTransition for non-urgent updates - •
rerender-use-ref-transient-values- Use refs for transient frequent values
5. Rendering Performance (MEDIUM)
- •
rendering-animate-svg-wrapper- Animate div wrapper, not SVG element - •
rendering-content-visibility- Use content-visibility for long lists - •
rendering-hoist-jsx- Extract static JSX outside components - •
rendering-svg-precision- Reduce SVG coordinate precision - •
rendering-conditional-render- Use ternary, not && for conditionals - •
rendering-usetransition-loading- Prefer useTransition for loading state
6. JavaScript Performance (LOW-MEDIUM)
- •
js-batch-dom-css- Group CSS changes via classes or cssText - •
js-index-maps- Build Map for repeated lookups - •
js-cache-property-access- Cache object properties in loops - •
js-cache-function-results- Cache function results in module-level Map - •
js-cache-storage- Cache localStorage/sessionStorage reads - •
js-combine-iterations- Combine multiple filter/map into one loop - •
js-length-check-first- Check array length before expensive comparison - •
js-early-exit- Return early from functions - •
js-hoist-regexp- Hoist RegExp creation outside loops - •
js-min-max-loop- Use loop for min/max instead of sort - •
js-set-map-lookups- Use Set/Map for O(1) lookups - •
js-tosorted-immutable- Use toSorted() for immutability
7. Advanced Patterns (LOW)
- •
advanced-event-handler-refs- Store event handlers in refs - •
advanced-init-once- Initialize app once per app load
How to Use
Read individual rule files for detailed explanations and code examples:
code
rules/async-parallel.md rules/bundle-barrel-imports.md
Credit: adapted from vercel-labs/agent-skills