Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      BlogReact PrepPricingDiscordNewsletterLeaderboard
    React challenge/hard

    Investigate a Render Budget

    Challenge workspace

    90-110 min
    Real-world mini-appsPath 29/30
    Components & propsState & eventsLists

    Suggested first

    Build a Typed Release Explorer

    Your workspace must pass its server-side browser checks to complete this challenge.

    Day 8 — Investigate the render budget

    The list feels slow when selection changes. Profile first, then prevent only the avoidable work.

    Requirements

    • Keep filtering correct and derived from the query.
    • Ensure a stable selection callback and memoize rows only when their props are stable.
    • Pass a boolean selected flag rather than the whole selected ID to every row.
    • Explain what you measured and why each optimization helps.

    Interview review

    • Why can indiscriminate useMemo make code worse?
    • What would virtualization solve that memoization does not?