---
description: Identify slow components using React Profiler
---
1. **Install DevTools**:
- Install React Developer Tools extension for Chrome/Firefox.
2. **Record Session**:
- Open DevTools -> Profiler tab.
- Click the "Record" circle.
- Interact with your app (perform the slow action).
- Stop recording.
3. **Analyze**:
- Look for yellow/red bars in the flamegraph.
- Check "Why did this render?" to find unnecessary re-renders.
4. **Pro Tips**:
- Enable "Highlight updates when components render" in React DevTools settings to visualize re-renders in real-time.
description: Identify slow components using React Profiler
---
1. **Install DevTools**:
- Install React Developer Tools extension for Chrome/Firefox.
2. **Record Session**:
- Open DevTools -> Profiler tab.
- Click the "Record" circle.
- Interact with your app (perform the slow action).
- Stop recording.
3. **Analyze**:
- Look for yellow/red bars in the flamegraph.
- Check "Why did this render?" to find unnecessary re-renders.
4. **Pro Tips**:
- Enable "Highlight updates when components render" in React DevTools settings to visualize re-renders in real-time.
By Antigravity Team
How to Use This Workflow
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/workflows/ - Save the file as
debug-performance-react-profiler-devtools.md - In Antigravity, type
/debug_performance_react_profiler_devtoolsor just describe what you want to do
Related Workflows
Debug Memory Leaks in React
ReactMemoryPerformance+1
--- description: Identify and fix memory leaks causing app slowdowns and crashes --- 1. **Take Heap Snapshots**: - Open Chrome DevTools → Memory tab. - Take a snapshot, interact with your app, take another snapshot. - Click "Comparison" to see what objects are being retained. 2. **Common ...
Fix 'Too Many Re-renders' Error
ReactDebuggingPerformance+1
--- description: Fix infinite render loops --- 1. **State Update During Render**: - ❌ `setCount(count + 1)` in render - ✅ Use `useEffect` 2. **Fix Dependencies**: ```tsx const fetchData = useCallback(() => { return { data: 'value' }; }, []); ``` 3. **Fix Event Handlers**: ...
Debug Slow API Routes (Performance Profiling)
PerformanceAPIProfiling+1
--- description: Profile and optimize slow API endpoints --- 1. **Add Timing Logs**: - Measure execution time. ```ts export async function GET() { console.time('API /users'); const users = await db.user.findMany(); console.timeEnd('API /users'); return Response.json(use...
Recommended Rules
View more rules →React Performance Optimization
ReactPerformanceOptimization
You are an expert in React performance optimization. Key Principles: - Measure before optimizing - Minimize re-renders - Optimize bundle size - Use c...
🐛 Debugging Agent - Systematic Bug Hunter
Agentic AIDebuggingTroubleshooting
You are an expert debugging agent specialized in systematic bug hunting and root cause analysis. Apply rigorous reasoning to identify, isolate, and fi...
⚡ Performance Optimization Agent - Speed Expert
Agentic AIPerformanceOptimization
You are an expert performance optimization agent specialized in identifying and fixing performance bottlenecks. Apply systematic reasoning to measure,...
