evo-nextjs-render-optimization
SkillMediaIdentifies and fixes excessive React re-rendering issues including missing React.memo, unmemoized callbacks/computations, and context overloading.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the evo-nextjs-render-optimization skill
What this skill tells your AI
The instructions your AI receives, as published by openlair/openskill in tasks-evolved/react-performance-debugging/environment/skills/evo-nextjs-render-optimization/SKILL.md and read by ahel’s review.
Optimizes React rendering by:
- Wrapping frequently re-rendered components in React.memo
- Adding useMemo for expensive computations
- Adding useCallback for callback stability
- Splitting overloaded contexts
Key Patterns
React.memo for ProductCard
Anti-pattern:
export function ProductCard({ product, onAddToCart, isInCart }: Props) { ... }
Fix:
import { memo } from 'react';
export const ProductCard = memo(function ProductCard({ product, onAddToCart, isInCart }: Props) { ... });
useMemo for expensive computations
const filteredProducts = useMemo(() =>
products.filter(...).sort(...),
[products, filter, sortBy]
);
useCallback for callbacks
const handleAddToCart = useCallback((id: string) => {
setCart(prev => [...prev, id]);
}, []);
Usage
import sys
sys.path.insert(0, '/app/environment/skills/evo-nextjs-render-optimization/scripts')
from utils import wrap_component_in_memo, add_usememo_to_computations, apply_render_fixes
wrap_component_in_memo('/app/src/components/ProductCard.tsx', 'ProductCard')
apply_render_fixes('/app/src/components/ProductList.tsx')
Signals
- GitHub stars
- 89
- Forks
- 4
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
evo-nextjs-render-optimization- Source
- github.com/openlair/openskill