Performance Interview Questions
With Answers & Code Examples

• Debounce — fires AFTER user stops triggering. Best for: search input, resize, form validation
• Throttle — fires at most once per interval. Best for: scroll, mouse move

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
const onSearch = debounce((q) => fetchResults(q), 300);

React.memo wraps a component and shallowly compares old and new props. Skips the re-render if props haven't changed.

const ExpensiveList = React.memo(function ExpensiveList({ items, onSelect }) {
  // Only re-renders if items or onSelect reference changes
  return items.map(item => );
});

// ─── For memo to work, props must be stable references ────────────────────
function Parent() {
  const [count, setCount] = useState(0);

  // ❌ New array reference every render → memo useless
  const items = [{ id: 1 }, { id: 2 }];
  const onSelect = (id) => console.log(id);

  // ✅ Stable references
  const items = useMemo(() => [{ id: 1 }, { id: 2 }], []);
  const onSelect = useCallback((id) => console.log(id), []);

  return ;
}

Custom comparison:

const List = React.memo(Component, (prev, next) => {
  return prev.items.length === next.items.length; // custom equality
});

import { lazy, Suspense } from 'react';

// ❌ Eager import — bundled in the main chunk even if rarely used
import HeavyChart from './HeavyChart';

// ✅ Lazy — loaded only when rendered for the first time
const HeavyChart = lazy(() => import('./HeavyChart'));
const AdminPanel = lazy(() => import('./AdminPanel'));

// Suspense shows fallback while the chunk loads
function Dashboard() {
  return (
    }>
      
    
  );
}

// Route-based code splitting — most impactful
const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

function App() {
  return (
    }>
      
        } />
        } />
        } />
      
    
  );
}

Virtualization renders only the items visible in the viewport instead of the entire list. For 10,000 items, you might only render 20 DOM nodes at a time.

import { FixedSizeList } from 'react-window';

// ❌ Renders all 10,000 DOM nodes immediately
function NaiveList({ items }) {
  return items.map(item => );
}

// ✅ Renders ~20 DOM nodes, recycles them as you scroll
function VirtualList({ items }) {
  const Row = ({ index, style }) => (
    
 {/* style positions the row */}
      {items[index].name}
    
  );

  return (
    
      {Row}
    
  );
}

When to virtualize:

• Lists with 100+ items where each item has significant DOM
• Visible performance issues (jank, slow initial render)
• Tables, feeds, chat history, autocomplete dropdowns

Libraries: react-window (smaller), react-virtual (TanStack, headless), react-virtuoso (variable heights)

Common causes:

• Parent re-renders → all children re-render (even with same props, unless memoized)
• New object/array/function created inline → reference changes → memo fails
• Context value is a new object reference → all consumers re-render
• State updates that produce the same value (React bails out after first redundant render)

// ❌ New object every render — breaks memo
  // new {} each time
 doWork()} />  // new fn each time
         // new [] each time

// ❌ Context providing unstable reference
function Provider({ children }) {
  const [user, setUser] = useState(null);
  return (
      {/* new object every render! */}
      {children}
    
  );
}

// ✅ Stable context value
const value = useMemo(() => ({ user, setUser }), [user]);

Diagnosis tools:

• React DevTools → Profiler → record interaction → see what rendered and why
• React DevTools → Components → highlight updates checkbox
• why-did-you-render library — logs unnecessary renders with reasons

The React DevTools Profiler helps identify slow renders and unnecessary re-renders.

Using React DevTools Profiler:

1. Open DevTools → Profiler tab
2. Click Record, interact with the app, stop recording
3. See flame chart showing each render by component and duration
4. Click a bar to see why it rendered: props changed, hook changed, parent rendered

The Profiler API for automated performance testing:

import { Profiler } from 'react';

function onRenderCallback(
  id,           // tree id (prop)
  phase,        // "mount" | "update" | "nested-update"
  actualDuration, // time spent rendering committed update
  baseDuration,   // estimated time without memoization
  startTime,
  commitTime
) {
  if (actualDuration > 16) { // over one 60fps frame
    console.warn(`Slow render in ${id}: ${actualDuration}ms`);
  }
}

function App() {
  return (
    
      
    
  );
}

What to look for:

• Components that render when they shouldn't (add React.memo)
• baseDuration >> actualDuration → memoization is working
• actualDuration consistently high → expensive render, consider useMemo

Memory leaks occur when objects are no longer needed but are still referenced, preventing garbage collection.

Common causes:

// 1. Forgotten intervals
const el = document.getElementById('status');
const id = setInterval(() => { el.innerHTML = Date.now(); }, 1000);
// If el is removed from DOM but interval isn't cleared → leak
// Fix: clearInterval(id) when done

// 2. Detached DOM nodes
let detached;
function create() {
  detached = document.createElement('div'); // global reference
  document.body.appendChild(detached);
  document.body.removeChild(detached); // removed from DOM...
  // but 'detached' variable still holds it → leak
}

// 3. Closures capturing large objects
function leaky() {
  const bigData = new Array(1_000_000).fill('*');
  return () => bigData[0]; // ALL of bigData kept alive!
}

// 4. Event listeners not removed
window.addEventListener('resize', heavyHandler);
// Fix: window.removeEventListener('resize', heavyHandler) on cleanup

// 5. Growing caches without eviction
const cache = {};
function store(key, val) { cache[key] = val; } // never cleared!

Detection: Chrome DevTools → Memory → Heap Snapshot → look for "Detached" DOM nodes, or compare snapshots over time for growing retained size.

Repaint — visual property change (color, background, visibility) without affecting layout. Less expensive.

Reflow (Layout) — geometry change (width, height, position, padding, margin). Expensive: cascades through the document.

// Layout thrashing — alternating reads and writes force reflow each iteration
for (let i = 0; i < 100; i++) {
  const h = el.offsetHeight;       // READ — forces layout (reflow)
  el.style.height = h + 1 + 'px'; // WRITE — invalidates layout
}
// Browser must reflow 100 times! ❌

// Fix: batch all reads, then all writes
const h = el.offsetHeight; // single read
for (let i = 0; i < 100; i++) {
  el.style.height = (h + i) + 'px'; // writes only
}

// Best fix: CSS transforms — composited on GPU, NO reflow
el.style.transform = 'translateY(10px)'; // skip layout entirely!

// Properties that DON'T trigger reflow (GPU composited):
// transform, opacity, filter, will-change

What triggers reflow: offsetWidth/Height, getBoundingClientRect(), scrollTop, getComputedStyle(), adding/removing DOM nodes, font changes.

Lazy loading defers loading of non-critical resources until they're actually needed.

Code splitting breaks your JS bundle into smaller chunks loaded on demand.

// ─── Native Lazy Loading (images, iframes) ─────────────────
<img src="hero.jpg" loading="eager" />   // load immediately
<img src="below-fold.jpg" loading="lazy" /> // load when near viewport

// ─── JS Code Splitting (Webpack/Vite) ─────────────────────
// Static import — included in main bundle
import { utils } from './utils.js';

// Dynamic import — separate chunk, loaded on demand
async function loadChart() {
  const { Chart } = await import('./HeavyChart.js'); // separate bundle
  new Chart(element, data);
}

// Route-based splitting (React Router)
const Dashboard = React.lazy(() => import('./Dashboard'));
const Settings  = React.lazy(() => import('./Settings'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings"  element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

// ─── IntersectionObserver lazy loading ────────────────────
const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    entry.target.src = entry.target.dataset.src;
    observer.unobserve(entry.target);
  }
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));