Careeroza

Performance Interview Questions

What causes unnecessary re-renders?

  • A parent re-renders, so all children re-render even if their props are the same.
  • State kept too high in the tree.
  • New object/array/function references created on every render and passed as props.
  • A large context value that changes often.
  • Wrong dependency arrays in hooks.

How do you use React.memo and when?

const Fast = React.memo(Component) skips re-renders when props are shallowly equal. Use it for components that render often with the same props and are expensive; pair with useMemo/useCallback for object and function props. Using it everywhere adds comparison overhead.

How do you implement code splitting?

const Reports = React.lazy(() => import('./Reports'));

<Suspense fallback={<Spinner />}>
  <Reports />
</Suspense>

How do you render a list of 10,000 items?

Virtualize it with react-window / TanStack Virtual (render only visible rows), or use pagination / infinite scroll. Use stable keys and memoized rows.

How do you optimise Context API usage?

  • Split one big context into smaller ones.
  • Memoize the provider value with useMemo.
  • Keep fast-changing values out of context or move them to a store with selectors.

How do you optimise images and media?

  • Modern formats (WebP/AVIF) and responsive sizes (srcset).
  • loading="lazy" for below-the-fold images.
  • A CDN with caching; the Next.js Image component does much of this automatically.

How do React 18 concurrent features help performance?

useTransition and useDeferredValue mark updates as non-urgent so typing and clicks stay responsive while heavy re-renders happen in the background; Suspense streams parts of the UI as they become ready.