React Rendering & Performance Interview Questions

When does a component re-render?

A component re-renders in exactly four situations:

1. Its own state changes — any useState or useReducer setter is called
2. Its parent re-renders — by default, all children re-render when the parent does
3. Its context value changes — any useContext call creates a subscription
4. A hook it calls re-renders — custom hooks that internally use state/effects

function Parent() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <Child />   {/* re-renders every time Parent re-renders */}
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
    </div>
  )
}
function Child() {
  console.log('Child rendered')  // logs on every Parent state update
  return <div>I am static</div>
}

React.memo — skipping child re-renders

Wrapping a component in React.memo makes React skip re-rendering it if its props haven't changed (shallow comparison).

// Without memo — re-renders on every parent update
function Child({ name }) { console.log('render'); return <p>{name}</p> }
// With memo — skips re-render if name prop is the same reference/value
const Child = React.memo(function Child({ name }) {
  console.log('render')
  return <p>{name}</p>
})
 
// Custom comparator — control what "same" means
const Child = React.memo(Child, (prev, next) => prev.name === next.name)

Common trap: React.memo only helps if the props are actually stable. Object/array/function props created inline are new references every render — memo never skips.

// ✗ Defeats React.memo — style is a new object every render
<Child style={{ color: 'red' }} />
// ✓ Stable reference — React.memo can skip
const style = useMemo(() => ({ color: 'red' }), [])
<Child style={style} />

The reconciliation algorithm

React diffs the new virtual DOM tree against the previous one using two heuristics:

Heuristic 1 — Different element type = destroy and rebuild the subtree:

// Before: <Counter /> inside <div>
// After: <Counter /> inside <section>
// React destroys the div subtree and rebuilds — Counter's state is lost!

Heuristic 2 — Keys identify list elements across renders:

// Without keys — React diffs by index
// Inserting at start: ALL items appear to change → O(n) DOM updates
[A, B, C] → [X, A, B, C]
// With keys — React matches by identity
// Inserting at start: only X is new → O(1) DOM update
<li key="a">A</li><li key="b">B</li> → <li key="x">X</li><li key="a">A</li>

Avoid layout thrashing

// ✗ Layout thrashing — forces browser to recalculate layout repeatedly
elements.forEach(el => {
  const height = el.offsetHeight      // read (forces layout)
  el.style.height = height * 2 + 'px' // write (invalidates layout)
  // Next iteration's read forces layout recalculation again!
})
// ✓ Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight)  // all reads
heights.forEach((h, i) => elements[i].style.height = h * 2 + 'px')  // all writes

Code splitting with React.lazy and Suspense

import { lazy, Suspense } from 'react'
// Route-level code splitting — bundle only loaded when route is visited
const Dashboard  = lazy(() => import('./Dashboard'))
const Analytics  = lazy(() => import('./Analytics'))
const Settings   = lazy(() => import('./Settings'))
function App() {
  return (
    <Suspense fallback={<PageSpinner />}>
      <Routes>
        <Route path="/dashboard"  element={<Dashboard />} />
        <Route path="/analytics"  element={<Analytics />} />
        <Route path="/settings"   element={<Settings />} />
      </Routes>
    </Suspense>
  )
}
// Component-level splitting — heavy component loaded on demand
const HeavyChart = lazy(() => import('./HeavyChart'))
function Page() {
  const [showChart, setShowChart] = useState(false)
  return showChart
    ? <Suspense fallback={<Spinner />}><HeavyChart /></Suspense>
    : <button onClick={() => setShowChart(true)}>Load Chart</button>
}

Virtualization — rendering only what's visible

import { FixedSizeList } from 'react-window'
// ✗ Renders all 10,000 DOM nodes — catastrophic for performance
function BadList({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}  {/* 10,000 DOM nodes */}
    </ul>
  )
}
// ✓ Only renders ~15 visible rows — 10,000 items, ~15 DOM nodes
function GoodList({ items }) {
  return (
    <FixedSizeList
      height={600}      // visible container height
      itemCount={items.length}
      itemSize={50}     // height of each row
      width="100%"
    >
      {({ index, style }) => (
        <div style={style} key={items[index].id}>
          {items[index].name}
        </div>
      )}
    </FixedSizeList>
  )
}

The React Profiler — finding actual bottlenecks

import { Profiler } from 'react'
function onRenderCallback(id, phase, actualDuration, baseDuration) {
  // id: component name
  // phase: 'mount' or 'update'
  // actualDuration: time this render took (ms)
  // baseDuration: estimated time without memoization
  console.log({ id, phase, actualDuration, baseDuration })
}
<Profiler id="ProductList" onRender={onRenderCallback}>
  <ProductList products={products} />
</Profiler>

Use the React DevTools Profiler tab to record a session, identify which components render most and take longest, and find the actual bottleneck before adding any optimizations.

State colocation — the best optimization

Moving state as close to where it's used as possible is often more effective than adding memoization:

// ✗ State too high — every count change re-renders ExpensiveTree
function App() {
  const [count, setCount] = useState(0)
  return <><Counter count={count} onChange={setCount} /><ExpensiveTree /></>
}
// ✓ Colocate state — count change only re-renders Counter
function App() {
  return <><Counter /><ExpensiveTree /></>
}
function Counter() {
  const [count, setCount] = useState(0)  // moved into Counter
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}
 
// ✓ Lift content — ExpensiveTree is passed as children, doesn't re-render
function App() {
  return <Counter><ExpensiveTree /></Counter>
}
function Counter({ children }) {
  const [count, setCount] = useState(0)
  return <div><button onClick={() => setCount(c => c + 1)}>{count}</button>{children}</div>
  // children (ExpensiveTree) is created by App — doesn't re-render when count changes
}