How do I use the "Optimize React Component Performance" prompt?

Copy the prompt template, fill in the variables (COMPONENT_NAME, COMPONENT_FUNCTIONALITY, PERFORMANCE_ISSUES, COMPONENT_CODE), and paste it into ChatGPT, Claude, or Gemini.

What AI tools work with this coding prompt?

This prompt works with chatgpt, claude, gemini. Simply copy and paste the template into any of these AI assistants.

Tips for getting the best results?

Provide the complete component code for more accurate optimization suggestions Include information about parent component re-renders as they affect optimization strategy Mention your bundle size constraints as some optimizations may increase code size Specify your performance targets (e.g., 'needs to handle 1000+ list items smoothly') Include details about user interactions that trigger performance issues

coding intermediate

Optimize React Component Performance

Get AI-powered React optimization suggestions. Identify bottlenecks, implement performance fixes, and boost component rendering speed.

Works with: chatgptclaudegemini

Prompt Template

You are a React performance optimization expert. I need you to analyze my React component and provide specific optimization recommendations. Component Details: - Component name: [COMPONENT_NAME] - Main functionality: [COMPONENT_FUNCTIONALITY] - Current performance issues: [PERFORMANCE_ISSUES] - Component code: [COMPONENT_CODE] Please analyze this component and provide: 1. **Performance Issues Identification**: List specific performance problems you identify in the code, explaining why each is problematic. 2. **Optimization Strategies**: Provide detailed recommendations including: - React.memo() usage opportunities - useCallback and useMemo implementation - State structure improvements - Re-rendering optimization - Component splitting suggestions - Virtual scrolling if applicable 3. **Optimized Code**: Rewrite the problematic parts of the component with optimizations applied, including comments explaining each optimization. 4. **Performance Measurement**: Suggest specific metrics to track and tools/techniques to measure the improvements. 5. **Best Practices**: Include relevant React performance best practices that apply to this component type. Focus on practical, implementable solutions that will have measurable impact on rendering performance and user experience.

Variables to Customize

[COMPONENT_NAME]

The name of the React component to optimize

Example: UserDashboard

[COMPONENT_FUNCTIONALITY]

Brief description of what the component does

Example: Displays user profile, recent activities, and real-time notifications with filtering options

[PERFORMANCE_ISSUES]

Current performance problems you've noticed

Example: Component re-renders frequently, slow scrolling in activity list, lag when typing in search filter

[COMPONENT_CODE]

The actual React component code

Example: const UserDashboard = ({ userId }) => { const [activities, setActivities] = useState([]); const [filter, setFilter] = useState(''); // ... rest of component }

Example Output

## Performance Issues Identification 1. **Unnecessary re-renders**: The component re-renders on every filter change, causing the expensive activity list to re-process 2. **Missing memoization**: Heavy calculations in render method aren't memoized 3. **Inefficient state updates**: Multiple setState calls causing cascading renders ## Optimization Strategies **React.memo() Implementation**: Wrap child components that don't need frequent updates ```jsx const ActivityItem = React.memo(({ activity }) => { return <div>{activity.title}</div>; }); ``` **useCallback for event handlers**: ```jsx const handleFilterChange = useCallback((newFilter) => { setFilter(newFilter); }, []); ``` **useMemo for filtered data**: ```jsx const filteredActivities = useMemo(() => { return activities.filter(activity => activity.title.toLowerCase().includes(filter.toLowerCase()) ); }, [activities, filter]); ``` ## Performance Measurement - Use React DevTools Profiler - Measure with Performance.now() around expensive operations - Monitor bundle size impact These optimizations should reduce re-renders by ~60% and improve scroll performance significantly.

Pro Tips for Best Results

Provide the complete component code for more accurate optimization suggestions
Include information about parent component re-renders as they affect optimization strategy
Mention your bundle size constraints as some optimizations may increase code size
Specify your performance targets (e.g., 'needs to handle 1000+ list items smoothly')
Include details about user interactions that trigger performance issues