⚡ React Performance Optimization

Answer:

React.memo kya hai:
React.memo ek Higher Order Component (HOC) hai jo component ko memoize karta hai. Yeh shallow comparison karta hai props ka, aur agar props same hain toh component ko re-render nahi karta.

Kaise kaam karta hai:
1. Component ko React.memo se wrap karo
2. Jab parent re-render hota hai, React props compare karta hai
3. Agar props same hain (shallow equality), previous render result reuse hota hai
4. Agar props different hain, component re-render hota hai

Example:

const ExpensiveComponent = React.memo(({ data }) => {
  // Heavy rendering logic
  return <div>{data}</div>;
});

Kab use karein:
✅ Component frequently re-render hota hai
✅ Props rarely change hote hain
✅ Component expensive computations karta hai
✅ Pure functional component hai (same props = same output)

Kab use na karein:
❌ Props har baar change hote hain
❌ Component already fast hai
❌ Simple components jo kuch compute nahi karte
❌ Premature optimization

Custom Comparison:

const Component = React.memo(
  ({ data }) => <div>{data}</div>,
  (prevProps, nextProps) => {
    // Return true to skip re-render
    return prevProps.data.id === nextProps.data.id;
  }
);

Answer:

Main Difference:
• useCallback: Function ko memoize karta hai (function reference preserve karta hai)
• useMemo: Function ke result ko memoize karta hai (computed value cache karta hai)

useCallback Example:

// Without useCallback - New function every render
const Parent = () => {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    console.log('Clicked');
  };
  
  return <Child onClick={handleClick} />;
};

// With useCallback - Same function reference
const Parent = () => {
  const [count, setCount] = useState(0);
  
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []); // Dependencies
  
  return <Child onClick={handleClick} />;
};

useMemo Example:

// Without useMemo - Calculation every render
const Component = ({ items }) => {
  const total = items.reduce((sum, item) => sum + item.price, 0);
  return <div>{total}</div>;
};

// With useMemo - Cached result
const Component = ({ items }) => {
  const total = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price, 0);
  }, [items]); // Recalculate only when items change
  
  return <div>{total}</div>;
};

Kab kaunsa use karein:

useCallback:
• Function ko child component mein pass kar rahe ho
• Function dependency hai useEffect/useMemo mein
• Event handlers jo frequently change nahi hote

useMemo:
• Expensive calculations
• Large data transformations
• Complex filtering/sorting
• Object/Array creation jo props mein jata hai

Memory Trick:
• useCallback = Callback function ko yaad rakho
• useMemo = Memo (memory) mein value store karo

Answer:

Common Causes aur Solutions:

1. Parent State Changes:
Problem: Parent ka state change hone pe saare children re-render hote hain
Solution:
• State ko neeche move karo (state colocation)
• React.memo use karo children pe
• Component composition use karo

// ❌ Bad
const Parent = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <ExpensiveChild /> {/* Unnecessarily re-renders */}
    </>
  );
};

// ✅ Good - State moved down
const Parent = () => {
  return (
    <>
      <Counter />
      <ExpensiveChild /> {/* Won't re-render */}
    </>
  );
};

2. Inline Objects/Arrays:
Problem: Har render pe naya reference create hota hai
Solution: useMemo ya component ke bahar move karo

// ❌ Bad
const Component = () => {
  const config = { theme: 'dark' }; // New object every render
  return <Child config={config} />;
};

// ✅ Good
const config = { theme: 'dark' }; // Outside component
const Component = () => {
  return <Child config={config} />;
};

3. Context Updates:
Problem: Context value change hone pe saare consumers re-render
Solution: Context split karo, value memoize karo

// ❌ Bad
const App = () => {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const value = { user, setUser, theme, setTheme };
  return <Context.Provider value={value}>...</Context.Provider>;
};

// ✅ Good - Split contexts
const App = () => {
  const userValue = useMemo(() => ({ user, setUser }), [user]);
  const themeValue = useMemo(() => ({ theme, setTheme }), [theme]);
  return (
    <UserContext.Provider value={userValue}>
      <ThemeContext.Provider value={themeValue}>...</ThemeContext.Provider>
    </UserContext.Provider>
  );
};

4. Inline Functions:
Problem: Har render pe naya function
Solution: useCallback use karo

Best Practices:
✅ React DevTools Profiler use karo to identify issues
✅ Measure before optimizing
✅ State ko jitna possible neeche rakho
✅ Composition over props drilling
✅ Memoization judiciously use karo

Answer:

React Profiler Tool:
React DevTools ka ek part hai jo component render performance measure karta hai.

Kaise Use Karein:
1. Install: React DevTools browser extension
2. Open: DevTools → Profiler tab
3. Record: Record button click karo
4. Interact: App ke saath interact karo
5. Stop: Recording stop karo
6. Analyze: Results dekho

Profiler Views:

1. Flame Graph:
• Component hierarchy dikhata hai
• Render time by color (green = fast, yellow = slow, red = very slow)
• Width = time spent rendering
• Click karke details dekho

2. Ranked Chart:
• Components sorted by render duration
• Slowest components pehle
• Optimization priorities identify karo

3. Component Chart:
• Individual component ka render history
• Har render ka duration
• Why did this render? information

Programmatic Profiler:

import { Profiler } from 'react';

const onRenderCallback = (
  id,              // Component ID
  phase,           // "mount" or "update"
  actualDuration,  // Time spent rendering
  baseDuration,    // Estimated time without memoization
  startTime,       // When React began rendering
  commitTime       // When React committed
) => {
  console.log(`${id} took ${actualDuration}ms`);
  
  // Send to analytics
  analytics.track('render', {
    component: id,
    duration: actualDuration,
    phase: phase
  });
};

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

Performance Issues Identify Karna:

Red Flags:
🚩 Components with high render counts
🚩 Render duration > 16ms (60fps ke liye)
🚩 Unexpected re-renders
🚩 Components that render but don't change
🚩 Large component trees rendering together

Analysis Steps:
1. Identify slowest components (Ranked view)
2. Check why they're rendering (Component view)
3. Look for unnecessary re-renders
4. Check parent-child render patterns
5. Measure before and after optimization

Production Monitoring:
• Use Profiler API to send metrics to analytics
• Track Core Web Vitals (LCP, FID, CLS)
• Set up performance budgets
• Use tools like Lighthouse, WebPageTest
• Monitor with Sentry, LogRocket, etc.

Answer:

List Virtualization Kya Hai:
Virtualization ek technique hai jisme sirf visible items ko DOM mein render karte hain. Jab user scroll karta hai, items dynamically add/remove hote hain. Isse 10,000+ items wali list bhi smooth scroll hoti hai.

Kaise Kaam Karta Hai:
1. Calculate visible area (viewport)
2. Determine which items are visible
3. Render only those items
4. Add padding to maintain scroll height
5. On scroll, recalculate and update

React Window vs React Virtualized:

Feature	React Window	React Virtualized
Bundle Size	~6 KB	~27 KB
Features	Basic, focused	Comprehensive
Learning Curve	Easy	Moderate
Use Case	Simple lists	Complex UIs

React Window Implementation:

import { FixedSizeList } from 'react-window';

const MyList = ({ items }) => {
  const Row = ({ index, style }) => (
    <div style={style}>
      Item {items[index].name}
    </div>
  );
  
  return (
    <FixedSizeList
      height={600}        // Container height
      itemCount={items.length}
      itemSize={50}       // Each item height
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
};

Variable Size Items:

import { VariableSizeList } from 'react-window';

const DynamicList = ({ items }) => {
  const listRef = useRef();
  
  const getItemSize = (index) => {
    // Dynamic height based on content
    return items[index].expanded ? 200 : 50;
  };
  
  return (
    <VariableSizeList
      ref={listRef}
      height={600}
      itemCount={items.length}
      itemSize={getItemSize}
      width="100%"
    >
      {Row}
    </VariableSizeList>
  );
};

Grid Virtualization:

import { FixedSizeGrid } from 'react-window';

const ImageGrid = ({ images }) => {
  const Cell = ({ columnIndex, rowIndex, style }) => {
    const index = rowIndex * 5 + columnIndex;
    return (
      <div style={style}>
        <img src={images[index]} />
      </div>
    );
  };
  
  return (
    <FixedSizeGrid
      columnCount={5}
      columnWidth={200}
      height={600}
      rowCount={Math.ceil(images.length / 5)}
      rowHeight={200}
      width={1000}
    >
      {Cell}
    </FixedSizeGrid>
  );
};

Performance Benefits:
• Constant render time (O(1) instead of O(n))
• Minimal DOM nodes (~20 instead of 10,000)
• Lower memory usage
• Smooth 60fps scrolling
• Works with millions of items

When to Use:
✅ Lists with 100+ items
✅ Infinite scroll
✅ Large data tables
✅ Image galleries
✅ Chat message history
✅ Any scrollable content with performance issues

Answer:

Web Workers Kya Hain:
Web Workers JavaScript ko background thread mein run karne dete hain, main UI thread ko block kiye bina. Yeh true parallelism provide karte hain aur heavy computations ke liye perfect hain.

Key Features:
• Separate thread mein run hote hain
• Main thread ko block nahi karte
• No DOM access (security reasons)
• Message passing through postMessage
• Can import other scripts

Complete Implementation:

Step 1: Create Worker File (worker.js):

// worker.js
self.addEventListener('message', (e) => {
  const { type, data } = e.data;
  
  switch(type) {
    case 'HEAVY_CALCULATION':
      const result = performHeavyCalculation(data);
      self.postMessage({ type: 'RESULT', result });
      break;
      
    case 'PROCESS_DATA':
      const processed = processLargeDataset(data);
      self.postMessage({ type: 'PROCESSED', data: processed });
      break;
  }
});

function performHeavyCalculation(data) {
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    sum += Math.sqrt(data[i]) * Math.sin(data[i]);
  }
  return sum;
}

function processLargeDataset(data) {
  return data
    .filter(item => item.active)
    .map(item => ({
      ...item,
      computed: item.value * 2
    }))
    .sort((a, b) => b.computed - a.computed);
}

Step 2: Custom Hook for Worker:

// useWorker.js
import { useEffect, useRef, useState } from 'react';

const useWorker = (workerPath) => {
  const workerRef = useRef(null);
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);
  
  useEffect(() => {
    // Create worker
    workerRef.current = new Worker(workerPath);
    
    // Listen for messages
    workerRef.current.addEventListener('message', (e) => {
      setResult(e.data);
      setIsProcessing(false);
    });
    
    // Listen for errors
    workerRef.current.addEventListener('error', (e) => {
      setError(e.message);
      setIsProcessing(false);
    });
    
    // Cleanup
    return () => {
      workerRef.current.terminate();
    };
  }, [workerPath]);
  
  const postMessage = (message) => {
    setIsProcessing(true);
    setError(null);
    workerRef.current.postMessage(message);
  };
  
  return { result, error, isProcessing, postMessage };
};

Step 3: Use in Component:

const DataProcessor = () => {
  const { result, isProcessing, postMessage } = useWorker('/worker.js');
  const [data, setData] = useState([]);
  
  const handleProcess = () => {
    postMessage({
      type: 'HEAVY_CALCULATION',
      data: data
    });
  };
  
  return (
    <div>
      <button onClick={handleProcess} disabled={isProcessing}>
        {isProcessing ? 'Processing...' : 'Process Data'}
      </button>
      {result && <div>Result: {result.result}</div>}
    </div>
  );
};

Alternative: Time Slicing (Without Workers):

const useTimeSlicing = (heavyTask, chunkSize = 1000) => {
  const [result, setResult] = useState(null);
  const [progress, setProgress] = useState(0);
  
  const process = async (data) => {
    let index = 0;
    let accumulated = [];
    
    while (index < data.length) {
      const chunk = data.slice(index, index + chunkSize);
      
      // Process chunk in next tick
      const chunkResult = await new Promise(resolve => {
        setTimeout(() => {
          resolve(heavyTask(chunk));
        }, 0);
      });
      
      accumulated.push(chunkResult);
      index += chunkSize;
      setProgress((index / data.length) * 100);
    }
    
    setResult(accumulated);
  };
  
  return { result, progress, process };
};

requestIdleCallback Approach:

const processInIdle = (data, callback) => {
  let index = 0;
  let result = [];
  
  const processChunk = (deadline) => {
    while (deadline.timeRemaining() > 0 && index < data.length) {
      result.push(heavyOperation(data[index]));
      index++;
    }
    
    if (index < data.length) {
      requestIdleCallback(processChunk);
    } else {
      callback(result);
    }
  };
  
  requestIdleCallback(processChunk);
};

Comparison:

Technique	Pros	Cons
Web Workers	True parallelism, UI never blocks	No DOM access, setup overhead
Time Slicing	Simple, DOM access available	Slower overall, still on main thread
requestIdleCallback	Runs during idle time	Not guaranteed, browser support

Best Practices:
✅ Use Workers for CPU-intensive tasks
✅ Keep worker code separate and focused
✅ Handle errors gracefully
✅ Terminate workers when done
✅ Consider worker pool for multiple tasks
✅ Measure performance before/after

Answer:

Complete Performance Strategy:

Phase 1: Development (Build Time)

1. Code Splitting:

// Route-based splitting
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));

// Component-based splitting
const HeavyChart = lazy(() => import('./components/Chart'));

// Vendor splitting (webpack config)
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

2. Bundle Analysis:
• webpack-bundle-analyzer use karo
• Large dependencies identify karo
• Tree-shaking verify karo
• Duplicate code eliminate karo

3. Component Optimization:

// Memoization strategy
const ExpensiveList = React.memo(({ items }) => {
  const sortedItems = useMemo(() => 
    items.sort((a, b) => b.value - a.value),
    [items]
  );
  
  const handleClick = useCallback((id) => {
    // Handle click
  }, []);
  
  return sortedItems.map(item => 
    <Item key={item.id} onClick={handleClick} />
  );
});

Phase 2: Runtime (User Experience)

1. Loading States:

// Suspense with fallback
<Suspense fallback={<LoadingSpinner />}>
  <LazyComponent />
</Suspense>

// Progressive loading
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState(null);

useEffect(() => {
  // Show skeleton immediately
  fetchData().then(result => {
    setData(result);
    setIsLoading(false);
  });
}, []);

2. Virtualization:
• Lists > 100 items ko virtualize karo
• react-window ya react-virtualized use karo
• Infinite scroll implement karo

3. Image Optimization:

// Lazy loading
<img src="image.jpg" loading="lazy" />

// Responsive images
<img 
  srcSet="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 800px"
  src="medium.jpg"
/>

// Progressive loading
<ProgressiveImage
  placeholder="thumbnail.jpg"
  src="full-image.jpg"
/>

Phase 3: Monitoring (Production)

1. Performance Metrics:

// Core Web Vitals
import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);  // Cumulative Layout Shift
getFID(console.log);  // First Input Delay
getLCP(console.log);  // Largest Contentful Paint

// Custom metrics
const onRenderCallback = (id, phase, actualDuration) => {
  analytics.track('component_render', {
    component: id,
    phase: phase,
    duration: actualDuration
  });
};

2. Error Tracking:
• Sentry for error monitoring
• LogRocket for session replay
• Custom error boundaries

3. Performance Budgets:

// webpack.config.js
performance: {
  maxAssetSize: 250000,      // 250 KB
  maxEntrypointSize: 400000, // 400 KB
  hints: 'error'
}

Phase 4: Continuous Optimization

Checklist:
☑️ Lighthouse score > 90
☑️ First Contentful Paint < 1.8s
☑️ Time to Interactive < 3.8s
☑️ Total bundle size < 200 KB (gzipped)
☑️ No unnecessary re-renders
☑️ Images optimized (WebP, lazy loading)
☑️ Code splitting implemented
☑️ Caching strategy in place
☑️ CDN for static assets
☑️ Service Worker for offline support

Tools:
• React DevTools Profiler
• Chrome DevTools Performance tab
• Lighthouse CI
• webpack-bundle-analyzer
• source-map-explorer
• Web Vitals library

Best Practices:
✅ Measure before optimizing
✅ Set performance budgets
✅ Automate performance testing
✅ Monitor real user metrics (RUM)
✅ Regular performance audits
✅ Document optimization decisions
✅ Train team on performance patterns