Interactive course

React Patterns, Good Practices & Internals

This is not React documentation. It is a senior engineer sitting beside you: “Run this. What do you think will happen? Now change this line. See that? Here's why React behaves that way.” Render vs commit, reconciliation, Fiber, state snapshots, stale closures, refs, performance, async React and internals — with real production bugs and interview-ready answers.

Intermediate → SeniorEverything runs in the IDE182 Step12 modules

Module 1 · Rendering, Identity & Reconciliation10 lessons

Render vs commit, how React decides what changed, and why component state survives — or doesn't.

Module 2 · State Done Correctly12 lessons

State as a snapshot, batching, functional updates, immutability, and deciding where state should live.

Module 3 · Effects Without Pain12 lessons

When you don't need an effect, dependencies, stale closures, cleanup, and async race conditions.

Module 4 · Refs & Escape Hatches9 lessons

State vs ref, DOM access, and why reusing a custom hook reuses logic — never state.

Module 5 · Rendering & Performance20 lessons

What actually causes a render, referential equality, memo/useMemo/useCallback — and when not to.

Module 6 · Events & Forms8 lessons

Controlled vs uncontrolled, propagation, defaults, and form state architecture.

Module 7 · Component Architecture15 lessons

Composition, context, headless logic, compound components, reducers and explicit state machines.

Module 8 · Async & Modern React12 lessons

Async UI states, Suspense, error boundaries, transitions, optimistic UI and the modern action APIs.

Module 9 · Production Bug Laboratory16 lessons

Sixteen lessons that start broken. Reproduce the symptom, find the root cause, ship the fix.

Module 10 · React Internals & Senior Interview Mental Models24 lessons

Elements, Fibers, the two trees, lanes, scheduling, concurrency, hydration and the server boundary.

Module 11 · Good Practices & Interview Essentials37 lessons

Portals, a11y, focus, code splitting, HOCs vs hooks, refs, testing, classes, legacy answers, security, tearing — plus live-coding, code-review, trade-off and diagnosis rounds, TypeScript, data fetching, forms, error boundaries, Server Components, frontend system design, the bug you cannot reproduce, two rapid-fire rounds, a spot-the-bug speed round, a predict-the-console-order game, the platform features you no longer have to build, the rules of hooks broken on purpose, and twelve answers that sound right and aren't.

Module 12 · Build It Yourself & Advanced Patterns7 lessons

Write a working useState and a tiny renderer from scratch, then the patterns that need the model: recursion, latest-ref, time travel, FLIP animation and infinite scroll.

React Course React 19 Course Back to Developer Hub

React Patterns, Good Practices & Internals

Render vs Commit

Components Must Be Pure

Reconciliation

Fiber Mental Model

Keys and List Identity

Using Keys to Reset State

Component Identity

Why State Sometimes Resets

Conditional Rendering and Identity

Fragments and Keys

State Is a Snapshot

Batching State Updates

Functional State Updates

Never Mutate State

Immutable Array Updates

Immutable Object Updates

Avoid Redundant State

Avoid Contradictory State

State Normalization

Lifting State Up

State Colocation

Preserving vs Resetting State

You Might Not Need an Effect

Effect Lifecycle

Dependency Arrays

Stale Closures

Infinite Effect Loops

Object Dependencies

Function Dependencies

Effect Cleanup

Fetch Race Conditions

AbortController

Event Logic vs Effect Logic

Strict Mode and Double Effect Execution

State vs Ref

Persistent Values with useRef

DOM References

Previous Value Pattern

Timers with Refs

Ref vs Local Variable

Imperative Handles

Custom Hooks with State and Refs

Custom Hooks Share Logic, Not State

What Actually Causes a Render?

Parent Re-renders and Child Re-renders

Props Do Not Independently Trigger Renders

Render Does Not Mean DOM Update

Unnecessary Re-renders

React.memo

Referential Equality

What Shallow Comparison Actually Means

useMemo

Stabilising a Reference

useCallback

Stable Callbacks from Custom Hooks

When NOT to Memoize

When a New Reference Is the Bug

React Compiler Mental Model

Context Re-render Problems

Splitting Context

Large List Performance

React Profiler

Identity & Memoization — the Whole Map

Controlled vs Uncontrolled Inputs

Passing vs Calling Event Handlers

Callback Arity: the Arguments You Didn't Ask For

Event Propagation

stopPropagation

preventDefault

Form State Architecture

Derived Validation

Composition

children

Prop Drilling

Context

Custom Hooks

Headless Logic

Compound Components

Controlled Component APIs