Help us improve
Share bugs, ideas, or general feedback.
From react-master
Analyzes a React component for performance issues like re-renders, missing memoization, and video element problems, then provides optimized code with explanations.
npx claudepluginhub josiahsiegel/claude-plugin-marketplace --plugin react-masterHow this command is triggered — by the user, by Claude, or both
Slash command
/react-master:react-optimize ComponentName or path/to/Component.tsxThe summary Claude sees in its command listing — used to decide when to auto-load this command
# Optimize React Component Performance Analyze and optimize a React component for better performance. ## Arguments - `$ARGUMENTS` - Component name or file path to optimize ## Instructions Analyze and optimize the specified React component: 1. **Performance Analysis** - Read the component file specified in `$ARGUMENTS` - Identify unnecessary re-renders - Find expensive computations - Check for missing memoization - Identify bundle size concerns 2. **Common Issues to Check** - Inline object/function creation in JSX - Missing React.memo on pure components - Missin...
/react-patternsReviews React code for performance and composition patterns using 50+ impact-ranked rules. Provide optional file-or-component-path or scans current project.
/optimizeAnalyzes Next.js app for performance issues in components, data fetching, bundles, images, and caching; generates optimization report with recommendations.
/reactDesigns React app architecture: component hierarchy, state management strategy, performance optimizations, Server Components, concurrent features, and RTL testing patterns. Supports audit, perf, state, test, hooks, migration flags.
/react-reviewReviews React/JSX code for hook correctness, render performance, RSC boundaries, accessibility, and React-specific security issues, producing a categorized severity report.
/react-reviewReviews React/JSX code for hook correctness, render performance, server/client component boundaries, accessibility, and security. Produces a severity-categorized issue report.
/mui-perfAnalyzes MUI performance across bundle size, render optimization, DataGrid, SSR efficiency, and Emotion caching. Reports issues by severity and auto-applies safe fixes with --fix. Supports --scope scopes.
Share bugs, ideas, or general feedback.
Analyze and optimize a React component for better performance.
$ARGUMENTS - Component name or file path to optimizeAnalyze and optimize the specified React component:
Performance Analysis
$ARGUMENTSCommon Issues to Check
Inline object/function creation in JSX
Missing React.memo on pure components
Missing useMemo for expensive calculations
Missing useCallback for callbacks passed to children
Large component bundles (code splitting opportunities)
Missing keys or unstable keys in lists
Video/media element re-render issues (see below)
Video/Media Element Checks:
<video> elements using unstable keys (e.g., array index) causing decoder churn on re-renderuseRef to control play/pause/seek imperativelyReact.memo on video player components, causing remount on parent re-rendersonTimeUpdate={() => ...}) --- use useCallback for onPlay, onPause, onEnded, onTimeUpdate, onLoadedMetadatauseMemoplaysInline attribute for iOS Safari compatibilityOptimization Techniques
Report Format
// Before - new object every render
<Child style={{ color: 'red' }} />
// After - stable reference
const style = useMemo(() => ({ color: 'red' }), []);
<Child style={style} />
// Before - new function every render
<List onItemClick={(id) => handleClick(id)} />
// After - stable callback
const handleItemClick = useCallback((id: string) => {
handleClick(id);
}, [handleClick]);
<List onItemClick={handleItemClick} />
// Before - computed every render
const sortedItems = items.sort((a, b) => a.name.localeCompare(b.name));
// After - memoized
const sortedItems = useMemo(
() => [...items].sort((a, b) => a.name.localeCompare(b.name)),
[items]
);
// Before
function ExpensiveList({ items }: Props) { ... }
// After
const ExpensiveList = memo(function ExpensiveList({ items }: Props) { ... });
// Before - imported directly
import HeavyEditor from './HeavyEditor';
// After - lazy loaded
const HeavyEditor = lazy(() => import('./HeavyEditor'));
function App() {
return (
<Suspense fallback={<Loading />}>
<HeavyEditor />
</Suspense>
);
}
// Before - renders all items
{items.map(item => <Item key={item.id} {...item} />)}
// After - virtualized
import { FixedSizeList } from 'react-window';
<FixedSizeList height={400} itemCount={items.length} itemSize={50}>
{({ index, style }) => (
<Item style={style} {...items[index]} />
)}
</FixedSizeList>
// Before - blocks UI
setSearchResults(results);
// After - non-blocking
startTransition(() => {
setSearchResults(results);
});
After analysis, provide:
Issues Found
Optimized Code
Changes Made
Additional Recommendations