react-best-practices
Provides 29 actionable rules for optimizing React performance, focusing on bundle size and re-render efficiency.
Install
mkdir -p .claude/skills/react-best-practices && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1543" && unzip -o skill.zip -d .claude/skills/react-best-practices && rm skill.zipInstalls to .claude/skills/react-best-practices
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Client-side React performance optimization patterns.Key capabilities
- →Optimize React bundle size by importing from source files
- →Implement code splitting for heavy React components using `React.lazy`
- →Memoize expensive computations to prevent re-renders
- →Minimize hook dependency arrays to reduce re-renders
- →Use `useTransition` for non-urgent React updates
- →Batch DOM reads and writes to avoid layout thrashing
How it works
The skill provides rules categorized into bundle optimization, re-render prevention, rendering, async operations, JavaScript, and browser interactions. It details specific patterns like `React.lazy` for code splitting and `setState(prev => ...)` for functional state updates.
Inputs & outputs
When to use react-best-practices
- →Optimize React bundle size
- →Debug component re-render performance
- →Implement React.lazy code splitting
- →Memoize expensive computations
About this skill
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 |
When not to use it
- →When memoizing trivial expressions
- →When awaiting non-blocking work unnecessarily
- →When loading dependencies sequentially instead of in parallel
Limitations
- →The skill advises against memoizing trivial expressions
- →The skill advises against awaiting non-blocking work
- →The skill advises against loading dependencies sequentially
How it compares
This skill offers a categorized list of specific, actionable rules for React performance optimization, providing a direct solution compared to general programming advice.
Compared to similar skills
react-best-practices side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react-best-practices (this skill) | 22 | 3mo | No flags | Intermediate |
| react-component-performance | 2 | 5mo | No flags | Advanced |
| feature-flags | 6 | 6mo | Review | Intermediate |
| senior-qa | 6 | 2mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by redpanda-data
View all by redpanda-data →You might also like
react-component-performance
Dimillian
Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps.
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
senior-qa
alirezarezvani
This skill should be used when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality". Use for React/Next.js testing with Jest, React Testing Library, and Playwright.
harden
Aixbox
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.
benchmark-guardian
siliconjungle
Use for JS/TS performance-sensitive changes, benchmark additions, benchmark regressions, benchmark result JSON, or any claim that code is faster, smaller, cheaper, or not slower.
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.