frontend-react-best-practices_skill

Overview

This skill provides concise React performance and composition guidelines for writing, reviewing, and refactoring components. It focuses on reducing unnecessary re-renders, optimizing bundle patterns, and promoting composable component design. Use it to catch common pitfalls and apply practical fixes across hooks, rendering, and bundling.

How this skill works

The skill inspects tasks involving React components, hooks, memoization, and bundle optimization and returns targeted recommendations from categorized rules. It highlights fixes like direct imports to shrink bundles, using functional state updates, deriving values during render, hoisting static JSX, and preferring composition over boolean props. Outputs are actionable rules you can apply immediately during development or code review.

When to use it

• When authoring new React components to follow performant defaults
• During code reviews to spot re-render and bundle-size issues
• When refactoring to eliminate stale closures and extra renders
• While optimizing client bundles and lazy-loading heavy modules
• When designing component APIs to favor composition and clarity

Best practices

• Import modules directly instead of via barrels to reduce bundle weight
• Prefer functional setState for callbacks to avoid stale closures and extra deps
• Derive computed values during render or useMemo, not via effects and extra state
• Hoist static JSX and default non-primitive props to stable constants to preserve memoization
• Use startTransition, refs, and passive event listeners for non-blocking updates

Example use cases

• Replace barrel imports with direct icon imports to cut initial load time
• Refactor a component that uses useEffect to derive values into render-time computation or useMemo
• Wrap expensive subtrees with memo and hoist default prop functions to keep stable references
• Add conditional dynamic imports for feature-gated or heavy modules and preload on hover
• Convert a monolithic component with boolean flags into explicit variant or compound components