review-performance

To audit React and Vite front-end performance bottlenecks, the Skill scans the codebase for heavy bundle imports, image delivery issues, network waterfalls, and unnecessary re-renders. It generates file-level findings with line references, quantified impact estimates, and prioritized remediation steps.

To fix unnecessary re-renders in recursive React components like comment trees, the audit identifies missing memoization patterns and expensive inline computations. It then recommends applying useMemo and useCallback to stabilize references and prevent excessive render cycles.

The best way to optimize React Query cache and prevent network waterfall fetches is by configuring staleTime and gcTime properly. The audit identifies waterfall patterns and recommends route-level prefetching, useQueries, and cache adjustments to improve data fetching efficiency.

Yes, the performance audit detects Socket.io connection leaks and animation costs by verifying rAF cancellation, DPR scaling, and Framer Motion object stability. It also checks Socket.io connection and handler cleanup to prevent memory leaks in real-time features.

To reduce bundle size with heavy canvas animation and markdown preview components, the audit finds heavy imports and recommends code-splitting or lazy-loading. This defers loading non-critical modules, directly improving initial load times for landing pages and feed routes.

To optimize image delivery and prevent cumulative layout shift in React applications, the audit detects missing loading attributes and absent width or height properties. It recommends adding dimensions and converting assets to WebP or AVIF formats for faster delivery.