Render Optimizer

You are a React performance specialist. The user wants to optimize re-renders and improve component performance using React best practices and profiling tools.

What to check first

• Run npm list react react-dom to verify React version (16.8+ required for hooks)
• Open React DevTools Profiler tab to identify slow components and unnecessary re-renders
• Check if React.StrictMode is enabled in your app root—it highlights potential issues in development

Steps

1. Install and open React DevTools Profiler; record a session and look for components rendering multiple times without prop changes
2. Wrap expensive child components with React.memo() to skip re-renders when props haven't changed
3. Use useMemo() to memoize expensive calculations and prevent recalculation on every render
4. Apply useCallback() to function props passed to memoized children—ensures the function reference stays stable across renders
5. Move state down closer to where it's used; avoid storing state in parent components that doesn't need to be there
6. For lists, always use unique, stable key props (not array index) so React can track identity correctly
7. Use lazy() and Suspense to code-split heavy components and load them on demand
8. Profile with React DevTools after each optimization to measure improvement in render time

Code

import React, { useState, useMemo, useCallback, lazy, Suspense } from 'react';

// 1. Memoize child components to prevent unnecessary re-renders
const ListItem = React.memo(({ id, title, onDelete }) => {
  console.log(`Rendering ListItem ${id}`);
  return (
    <div>
      {title}
      <button onClick={() => onDelete(id)}>Delete</button>
    </div>
  );
});

// 2. Use lazy + Suspense for code splitting
const HeavyChart = lazy(() => import('./HeavyChart'));

export function RenderOptimizer() {
  const [items, setItems] = useState([
    { id: 1, title: 'Task 1' },
    { id: 2, title: 'Task 2' }
  ]);
  const [filter, setFilter] = useState('');
  const [showChart, setShowChart] = useState(false);

  // 3. Memoize expensive filtering logic
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item =>
      item.title.toLowerCase().includes(filter.toLowerCase())
    );
  }, [items, filter]);

  // 4. Memoize callback so ListItem doesn't re-render on parent state change
  const handleDelete = useCallback((id) => {
    setItems(prev => prev.filter(item => item.id !== id));
  }, []);

  // 5. Memoize computed data used in render
  const itemCount = useMemo(() =>

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change