Skip to content

React Core (Interview Prep)

A structured roadmap of the React fundamentals that matter most in frontend interviews. Start top-to-bottom.

Series: React Core

Progress: 0/16

Start here

React Core — Start Here (Roadmap + How to Study)

A senior-engineer roadmap for React: how to study, what to build, and how to use this React Core series effectively (with checkpoints + interview prep).

  1. 1

    React Core — Start Here (Roadmap + How to Study)

    4 min read

    A senior-engineer roadmap for React: how to study, what to build, and how to use this React Core series effectively (with checkpoints + interview prep).

  2. 2

    React Rendering: The Mental Model

    3 min read

    How React thinks about rendering, reconciliation, and why state changes cause re-renders.

  3. 3

    Components, Props, and State (Interview Essentials)

    3 min read

    Core building blocks: props vs state, one-way data flow, and when to lift state up.

  4. 4

    Keys in React Lists: Why They Matter

    3 min read

    How keys help React preserve identity and avoid subtle UI bugs.

  5. 5

    useEffect: Dependencies, Cleanup, and Common Traps

    ~16 min

    When effects run, how dependency arrays work, reference stability traps, and avoiding stale closures.

  6. 6

    useMemo vs useCallback: Differences, Examples & Interview Q&A

    5 min read

    Compare useMemo and useCallback with a working React example, dependency rules, common mistakes, and a render-tracing interview exercise.

  7. 7

    State Updates and Batching in React

    2 min read

    How React batches state updates and what it means for setState and derived state.

  8. 8

    Controlled vs Uncontrolled Components (Forms)

    2 min read

    How to think about form inputs, refs, and when each approach makes sense.

  9. 9

    React Context: When to Use It (and When Not To)

    2 min read

    Context basics, performance implications, and alternatives like composition.

  10. 10

    Custom Hooks: Extracting Reusable Logic

    2 min read

    How to build and name custom hooks, and what makes them testable and reusable.

  11. 11

    React Performance: An Interview Checklist

    2 min read

    Practical performance levers: memoization, splitting, virtualization, and avoiding unnecessary renders.

  12. 12

    React Rendering Deep Dive: Render vs Commit (and How to Prove Rerenders)

    4 min read

    A senior mental model of React rendering: render vs commit, reconciliation, why rerenders happen, and how to prove it using the React Profiler.

  13. 13

    Keys, Reconciliation, and Remounting: The Real Rules

    2 min read

    Why keys matter beyond lists: how reconciliation decides to preserve state or remount, why index keys break UIs, and how to debug key-related bugs.

  14. 14

    When to Use React.memo, useMemo and useCallback

    5 min read

    Decide when React memoization helps using a runnable list example, a before-and-after profiling exercise, and common reasons optimizations fail.

  15. 15

    React 18 Concurrency: Transitions, Interruptible Rendering, and Why INP Improves

    1 min read

    How React 18 scheduling works: urgent vs non-urgent updates, useTransition, interruptible rendering, and how these tools improve responsiveness (INP).

  16. 16

    Server vs Client Components (Next.js App Router): Boundaries, Hydration Cost, and Performance

    2 min read

    A senior model for Next.js Server Components: what runs where, how client boundaries increase JS + hydration cost, and how to design component trees for performance.