yoklainterview sim
ProgressHistory

Frontend React Rendering Performance Interview Questions

75 verified Frontend React Rendering Performance interview questions — solve with answers, learn from explanations, test yourself in a real simulation.

Try the real simulation →

Sample questions

React Rendering PerformanceDifficulty 1
In React's mental model, what is the relationship between a component "rendering" and the actual DOM being updated?
  • aRendering and updating the DOM are the same step; calling a render function writes directly to the page
  • bRendering produces a new UI description in memory, which React diffs against the previous one before touching the DOM✓
  • cRendering only happens once per component ever, and all later updates go straight to the DOM without comparison
  • dThe DOM is updated first, and the render function runs afterward to read the result back into state
Explanation:Calling a component function ("rendering") just returns a tree of React elements — a description of what the UI should look like. React then reconciles this new tree against the previous one and applies only the necessary mutations to the real DOM. A render does not guarantee a DOM write; if the resulting description is unchanged, nothing is touched on the page.
React Rendering PerformanceDifficulty 2
Parent holds a counter in state and re-renders every second. It renders <Child label="static" /> where label never changes and Child is a plain function component (no React.memo). What happens to Child on each Parent re-render?
  • aChild re-renders every time Parent re-renders, even though its own prop value never changed✓
  • bChild never re-renders again after the first mount, because its prop value is unchanged
  • cChild re-renders only on every second tick, skipping the ticks where Parent's render output looks identical
  • dChild re-renders only if it also declares its own useState or useEffect hook internally
Explanation:Without React.memo, a child re-renders whenever its parent re-renders, regardless of whether the props passed to it changed. React only skips re-rendering a subtree when that subtree is wrapped in memo (or when a bailout like useState's Object.is check applies to that component's own state). A plain component has no such opt-out, so it always re-executes along with its parent.
React Rendering PerformanceDifficulty 2
const logClick = () => console.log('clicked');

const Row = React.memo(function Row({ onClick }) {
  console.log('Row rendered');
  return <button onClick={onClick}>go</button>;
});

function Parent() {
  const [tick, setTick] = React.useState(0);
  return (
    <div>
      {tick}
      <button onClick={() => setTick(t => t + 1)}>tick</button>
      <Row onClick={logClick} />
    </div>
  );
}

Clicking "tick" repeatedly re-renders Parent. How many times does "Row rendered" log after the initial mount?
  • aOnce per click, because Parent's own re-render always forces Row to run again too
  • bIt logs on the first two clicks and then React stops calling Row after that
  • cIt never logs again after the initial mount✓
  • dIt logs on every other click, alternating between running and skipping Row
Explanation:logClick is declared once outside Parent, so the exact same function reference is passed to Row on every render. React.memo does a shallow comparison of props, and since onClick is Object.is-equal across renders (and there are no other props), Row bails out and does not re-render — only Parent re-renders on each click.
React Rendering PerformanceDifficulty 2
const Row = React.memo(function Row({ onClick }) {
  console.log('Row rendered');
  return <button onClick={onClick}>go</button>;
});

function Parent() {
  const [tick, setTick] = React.useState(0);
  return (
    <div>
      {tick}
      <button onClick={() => setTick(t => t + 1)}>tick</button>
      <Row onClick={() => console.log('clicked')} />
    </div>
  );
}

This is the same as before, except onClick={() => console.log('clicked')} is written inline inside Parent's JSX. What changes about Row's memoization?
  • aNothing changes; React.memo compares function behavior, not identity, so Row still skips re-rendering
  • bRow re-renders on every click, since a new arrow function each render means the onClick reference always differs✓
  • cRow re-renders only on the first click and then React caches the inline function forever
  • dReact.memo throws a warning and refuses to render Row when it receives an inline function prop
Explanation:An inline arrow function literal creates a brand-new function object on every render of Parent. React.memo's shallow prop comparison uses reference equality, and two different function objects are never equal even if their code is identical. So the onClick prop is considered "changed" on every render, and Row re-renders every time — this is the classic way memo gets silently defeated.
React Rendering PerformanceDifficulty 2
Building on the previous example (inline onClick defeats Row's memoization), which change to Parent restores the skip-re-render behavior while still passing a click handler as a prop?
  • aRemove React.memo from Row entirely and rely on React to detect the repeated log message
  • bMove the console.log('clicked') call inside Row itself so Parent no longer needs to pass a function
  • cReplace the arrow function with a bound method created fresh in the JSX, e.g. onClick={handleClick.bind(null)}
  • dWrap the handler in useCallback(() => console.log('clicked'), []) and pass that stable reference as onClick✓
Explanation:useCallback with an empty dependency array returns the exact same function reference across renders (until a listed dependency changes). Passing that stable reference as onClick means the prop is Object.is-equal on every Parent render, so React.memo's shallow comparison sees no change and Row skips re-rendering again.
React Rendering PerformanceDifficulty 2
function Report({ rows, filterText }) {
  const filtered = React.useMemo(
    () => rows.filter(r => r.name.includes(filterText)),
    [rows, filterText]
  );
  const [theme, setTheme] = React.useState('light');
  return (
    <div>
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>{theme}</button>
      <ul>{filtered.map(r => <li key={r.id}>{r.name}</li>)}</ul>
    </div>
  );
}

Clicking the theme button re-renders Report, but rows and filterText do not change. What does useMemo do on that re-render?
  • aIt returns the previously cached filtered array without re-running rows.filter(...), since neither dependency changed✓
  • bIt re-runs rows.filter(...) every time Report re-renders, regardless of the dependency array
  • cIt throws an error because theme is not listed in the dependency array even though it's unrelated to the computation
  • dIt skips rendering the <ul> entirely until rows or filterText changes
Explanation:useMemo re-runs its function only when a value in the dependency array changes (compared with Object.is against the previous render). Here rows and filterText are unchanged, so React skips re-running the filter and simply returns the memoized array from the previous render — avoiding the cost of re-filtering just because an unrelated theme state changed.

By specialization

Angular 450JavaScript 450React 450TypeScript 450Vue 450

By seniority

Frontend JuniorFrontend MidFrontend Senior

Other fields

BackendFullstackDevOps / CloudAI EngineerDatabaseMobileSecurityQA / Test AutomationData EngineerGame DevelopmentML Engineer

Test yourself against the 2925-question Frontend bank.

Start interview