The Frontend Path

14 mental models across TypeScript and React

I

NOVICEfundamentals

II

STUDIEDpatterns

III

ADVANCEDmastery

PHASE 1

PHASE 2

PHASE 3

01currently studyingJavaScript RefreshMost React bugs start one layer lower than React itself: shared references, accidental coercion, silent mutation, and queue ordering mistakes.Read the fundamentals →

032Object Spread and Falsy Traps

033Scheduling and Async Traps

050Content Coverage Score

02upcomingState-Driven UIState is a snapshot of what React rendered — the value you read in a handler belongs to the render where it was created, not the render where it runs.Read the fundamentals →

03upcomingData Fetching & Async State + Conditional TypesAsync state has four phases — and `infer` is the mechanism that extracts the resolved type from a promise so the hook can stay generic without losing the data shape.Read the fundamentals →

027Promise Adoption Traps

053Implement Promise.all

04upcomingEffects, Timers & CleanupAn effect is a synchronization step with a setup and a required cleanup — the pair is the contract, not just the setup.Read the fundamentals →

028Traffic Light

026Promise vs setTimeout

05upcomingComponent CompositionA compound component separates state ownership from visual structure — the parent holds the state, the children decide how to display it.Read the fundamentals →

029Modal Dialog

031Carousel Navigation

06upcomingRich Interactive UI + CSS LayoutMulti-concern UI separates navigation state, loading state, and animation state as independent dimensions that layer, not merge.Read the fundamentals →

035Image Carousel

07upcomingCollection & State Shape Hooks + GenericsWriting `useMap<K, V>` is where generic constraints stop being abstract — the shape of the collection forces you to constrain `K` and design the return type around `V`.Read the fundamentals →

051Search and Filter Bar

08upcomingTiming & Scheduling HooksDebounce delays until quiet; throttle limits the rate — they solve different problems and are never interchangeable.Read the fundamentals →

039useCountdown

052Debounced Search Hook

09upcomingDOM, Events & Browser API Hooks + Template Literal TypesDOM event names are template literal types in disguise — typing `useEventListener` so the handler narrows by event name is the concept made immediately concrete.Read the fundamentals →

040useEventListener

10upcomingAdvanced Hook Patterns + VarianceThe most complex hooks are small state machines — naming the valid states and their transitions is the design work; the code follows.Read the fundamentals →

042useMediatedState

11upcomingComplex State & Reducers + Mapped TypesA reducer makes state transitions explicit and impossible states unrepresentable — the shape of valid actions is as important as the shape of state.Read the fundamentals →

044Undoable Counter

12upcomingPerformance & Render OptimizationMemoization only helps when the input is stable — an unstable input makes it a tax, not a savings.Read the fundamentals →

046Selectable Cells

13upcomingAccessibility & Keyboard Interaction + Branded TypesARIA roles describe what something is; keyboard handlers describe how to use it — both are required for a component to be accessible.Read the fundamentals →

047Modal Dialog II & III

14upcomingFull-Feature ApplicationsA full-feature component is a system design problem: what state is shared, what is local, and what triggers re-renders across the tree.Read the fundamentals →

048Users Database