undefined

undefined

undefined

**Common Profiler Findings:**
1. **High render duration**: Component doing expensive work in render
2. **Many unnecessary renders**: Missing memoization or unstable dependencies
3. **Large component count**: Need for code splitting or virtualization
4. **Synchronous priority**: Opportunity for concurrent features

**Fixes Based on Profiler Data:**
- Render duration >16ms: Add useMemo for expensive calculations
- >10 unnecessary renders: Implement React.memo with custom comparison
- >100 components rendering: Consider virtualization or pagination
- Synchronous updates blocking: Use useTransition or useDeferredValue

undefined

**Prioritized Fixes:**
1. **Critical**: Remove inline objects and functions from JSX props
2. **High**: Add React.memo to frequently re-rendering components
3. **Medium**: Use useCallback for event handlers passed to children
4. **Low**: Add useMemo for expensive calculations in render

**Implementation Patterns:**
```jsx
// ❌ Bad - Inline objects cause unnecessary re-renders
function BadParent({ items }) {
  return (
    <div>
      {items.map(item => 
        <ExpensiveChild 
          key={item.id}
          style={{ margin: '10px' }} // New object every render
          onClick={() => handleClick(item.id)} // New function every render
          item={item}
        />
      )}
    </div>
  );
}

// ✅ Good - Stable references prevent unnecessary re-renders
const childStyle = { margin: '10px' };

const OptimizedChild = React.memo(({ item, onClick, style }) => {
  // Component implementation
});

function GoodParent({ items }) {
  const handleItemClick = useCallback((itemId) => {
    handleClick(itemId);
  }, []);

  return (
    <div>
      {items.map(item => 
        <OptimizedChild 
          key={item.id}
          style={childStyle}
          onClick={() => handleItemClick(item.id)}
          item={item}
        />
      )}
    </div>
  );
}

undefined

**Prioritized Fixes:**
1. **Critical**: Implement route-based code splitting with React.lazy
2. **High**: Replace heavy dependencies with lighter alternatives
3. **Medium**: Add component-level lazy loading for heavy features
4. **Low**: Optimize import statements for better tree-shaking

**Code Splitting Implementation:**
```jsx
// Route-based splitting
import { lazy, Suspense } from 'react';

const HomePage = lazy(() => import('./pages/HomePage'));
const DashboardPage = lazy(() => import('./pages/DashboardPage'));
const ReportsPage = lazy(() => import('./pages/ReportsPage'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/dashboard" element={<DashboardPage />} />
          <Route path="/reports" element={<ReportsPage />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

// Component-level splitting
function FeatureWithHeavyModal() {
  const [showModal, setShowModal] = useState(false);
  
  const HeavyModal = useMemo(() => 
    lazy(() => import('./HeavyModal')), []
  );
  
  return (
    <div>
      <button onClick={() => setShowModal(true)}>Show Modal</button>
      {showModal && (
        <Suspense fallback={<div>Loading modal...</div>}>
          <HeavyModal onClose={() => setShowModal(false)} />
        </Suspense>
      )}
    </div>
  );
}

undefined

**Memory Management Patterns:**
```jsx
// Proper cleanup implementation
function ComponentWithCleanup() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Event listeners
    const handleScroll = () => {
      console.log('Scrolled');
    };
    
    const handleResize = debounce(() => {
      console.log('Resized');
    }, 100);

    // Timers
    const interval = setInterval(() => {
      fetchLatestData().then(setData);
    }, 5000);

    // Async operations with AbortController
    const controller = new AbortController();
    
    fetchInitialData(controller.signal)
      .then(setData)
      .catch(err => {
        if (!err.name === 'AbortError') {
          console.error('Fetch failed:', err);
        }
      });

    // Add listeners
    window.addEventListener('scroll', handleScroll);
    window.addEventListener('resize', handleResize);

    // Cleanup function
    return () => {
      clearInterval(interval);
      controller.abort();
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>Component content: {data?.title}</div>;
}

// Memory monitoring hook
function useMemoryMonitor(componentName) {
  useEffect(() => {
    if (!performance.memory) return;
    
    const logMemory = () => {
      console.log(`${componentName} memory:`, {
        used: (performance.memory.usedJSHeapSize / 1048576).toFixed(2) + 'MB',
        total: (performance.memory.totalJSHeapSize / 1048576).toFixed(2) + 'MB'
      });
    };
    
    const interval = setInterval(logMemory, 10000);
    return () => clearInterval(interval);
  }, [componentName]);
}

undefined

**Virtualization Implementation:**
```jsx
// react-window implementation
import { FixedSizeList as List } from 'react-window';

const VirtualizedList = ({ items }) => {
  const Row = ({ index, style }) => (
    <div style={style}>
      <ItemComponent item={items[index]} />
    </div>
  );

  return (
    <List
      height={600}        // Viewport height
      itemCount={items.length}
      itemSize={80}       // Each item height
      overscanCount={5}   // Items to render outside viewport
    >
      {Row}
    </List>
  );
};

// Variable size list for complex layouts
import { VariableSizeList } from 'react-window';

const DynamicList = ({ items }) => {
  const getItemSize = useCallback((index) => {
    // Calculate height based on content
    return items[index].isExpanded ? 120 : 60;
  }, [items]);

  const Row = ({ index, style }) => (
    <div style={style}>
      <ComplexItemComponent item={items[index]} />
    </div>
  );

  return (
    <VariableSizeList
      height={600}
      itemCount={items.length}
      itemSize={getItemSize}
      overscanCount={3}
    >
      {Row}
    </VariableSizeList>
  );
};

undefined

**Core Web Vitals Implementation:**
```jsx
// Comprehensive Core Web Vitals monitoring
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

function setupWebVitalsMonitoring() {
  const sendToAnalytics = (metric) => {
    console.log(metric.name, metric.value, metric.rating);
    // Send to your analytics service
    gtag('event', metric.name, {
      value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
      event_label: metric.id,
      non_interaction: true,
    });
  };

  getCLS(sendToAnalytics);
  getFID(sendToAnalytics);
  getFCP(sendToAnalytics);
  getLCP(sendToAnalytics);
  getTTFB(sendToAnalytics);
}

// LCP optimization component
function OptimizedHero({ imageUrl, title }) {
  return (
    <div>
      <img
        src={imageUrl}
        alt={title}
        // Optimize LCP
        fetchpriority="high"
        decoding="async"
        // Prevent CLS
        width={800}
        height={400}
        style={{ width: '100%', height: 'auto' }}
      />
      <h1>{title}</h1>
    </div>
  );
}

// CLS prevention with skeleton screens
function ContentWithSkeleton({ isLoading, content }) {
  if (isLoading) {
    return (
      <div style={{ height: '200px', backgroundColor: '#f0f0f0' }}>
        <div className="skeleton-line" style={{ height: '20px', marginBottom: '10px' }} />
        <div className="skeleton-line" style={{ height: '20px', marginBottom: '10px' }} />
        <div className="skeleton-line" style={{ height: '20px', width: '60%' }} />
      </div>
    );
  }

  return <div style={{ minHeight: '200px' }}>{content}</div>;
}

import { useTransition, useState, useMemo } from 'react';

function SearchResults() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = (newQuery) => {
    // Urgent update - immediate UI feedback
    setQuery(newQuery);
    
    // Non-urgent update - can be interrupted
    startTransition(() => {
      const filtered = expensiveSearchOperation(data, newQuery);
      setResults(filtered);
    });
  };

  return (
    <div>
      <input
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Search..."
      />
      {isPending && <div>Searching...</div>}
      <ResultsList results={results} />
    </div>
  );
}

// useDeferredValue for expensive renders
function FilteredList({ filter, items }) {
  const deferredFilter = useDeferredValue(filter);
  
  const filteredItems = useMemo(() => {
    // This expensive calculation uses deferred value
    return items.filter(item => 
      item.name.toLowerCase().includes(deferredFilter.toLowerCase())
    );
  }, [items, deferredFilter]);

  const isStale = filter !== deferredFilter;

  return (
    <div style={{ opacity: isStale ? 0.5 : 1 }}>
      {filteredItems.map(item => 
        <Item key={item.id} {...item} />
      )}
    </div>
  );
}

// ❌ Bad - Single large context
const AppContext = createContext({
  user: null,
  theme: 'light',
  notifications: [],
  settings: {},
  currentPage: 'home'
});

// ✅ Good - Separate contexts by concern
const UserContext = createContext(null);
const ThemeContext = createContext('light');
const NotificationContext = createContext([]);

// Context value memoization
function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');

  // Memoize context value to prevent unnecessary re-renders
  const userContextValue = useMemo(() => ({
    user,
    setUser,
    login: (credentials) => loginUser(credentials).then(setUser),
    logout: () => logoutUser().then(() => setUser(null))
  }), [user]);

  const themeContextValue = useMemo(() => ({
    theme,
    setTheme,
    toggleTheme: () => setTheme(prev => prev === 'light' ? 'dark' : 'light')
  }), [theme]);

  return (
    <UserContext.Provider value={userContextValue}>
      <ThemeContext.Provider value={themeContextValue}>
        {children}
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

// Context selector pattern for fine-grained updates
function useUserContext(selector) {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUserContext must be used within UserProvider');
  }
  
  return useMemo(() => selector(context), [context, selector]);
}

// Usage with selector
function UserProfile() {
  const userName = useUserContext(ctx => ctx.user?.name);
  const isLoggedIn = useUserContext(ctx => !!ctx.user);

  return (
    <div>
      {isLoggedIn ? `Welcome ${userName}` : 'Please log in'}
    </div>
  );
}

undefined

undefined

undefined

undefined

undefined

undefined

undefined

undefined

// Runtime performance monitoring
function AppWithMonitoring() {
  const onRender = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
    // Alert on slow renders
    if (actualDuration > 16) {
      analytics.track('slow_render', {
        componentId: id,
        phase,
        duration: actualDuration,
        timestamp: commitTime
      });
    }
  };

  return (
    <Profiler id="App" onRender={onRender}>
      <App />
    </Profiler>
  );
}