Module I
Foundations
Mental models of state
Ⅰ
Open nowEnter the module →
← Back to all courses
Course Status
In progress · Module I of 10+ available now
Stop overthinkingUI state.
We sharpen our mental models by removing unnecessary abstractions.
A course for mid-to-senior frontend engineers who keep getting handed bloated reducers, prop-drilling spaghetti, and global stores that should have been a fetch call. We strip state down to first principles, then rebuild your mental model so you can make high-leverage calls for your team.
$100Early-bird · one-time feePrice goes up later. Preview Module I free, no signup.
MODULE I OPEN
Inside the course
- · 10+ modules
- · Mental models and applied lessons
- · Virtualization, React 19, Next.js
- · Design & build a social news feed from the ground up
Every app has a lifecycle of inputs and outputs.
Most state problems aren't library problems. They're classification problems. When you treat server data the same as local form state, you build reducers doing two jobs badly.
The course is built around one insight: inputs and outputs are fundamentally different, and they need different tools. Learn to see that distinction and most architecture calls become obvious.
Inputs
User-driven, kinetic, temporary. State you own. Forms, selections, in-progress actions.
Outputs
Persisted server data. The source of truth. You observe it, you don't own it.
The gap between them
Client state and server state are fundamentally different problems. Conflating them is where complexity is born.
The backbone of the whole course
The 6 Laws of UI State.
The false belief that we correct is that more "state management" = more control.
I
Single authority
One place decides the shape of state. Everything else reads from it.
II
Sync is a smell
If you're syncing two systems, you've duplicated something you shouldn't have.
III
Authority beats convenience
Keep the server as authority even when local state feels easier in the moment.
IV
Scope determines the tool
Match the tool to where state naturally lives and dies. Not to what's popular.
V
Server state is not client state
You observe server state. You don't own it. Stop copying it into reducers.
VI
Interfaces, not mirrors
Systems communicate through contracts, not shared copies of the same data.
The best state is the state you deleted.
10+ modules. One mental model. Zero state-management libraries.
Module II
The Sacred 4 UI Flows
Forms · validation · events
Ⅱ
Under curationcoming next
Module III
Displaying outputs
React Query, caching, fetching
Ⅲ
Under curationcoming next
Module IV
Wizard case study
URL state · multi-step forms · DB
Ⅳ
Under curationcoming next
Design and build a social news feed from scratch.
Not a toy. A production-grade application. The kind of system you'd actually ship. We start from the data model, work through the lifecycle, and end with an app that handles real load without falling over.
Along the way you'll wire up list virtualization so the feed stays smooth at thousands of items, use React 19 features where they earn their keep, and lean on Next.js for the parts of the stack that shouldn't live in the client.
What you'll build
- ✦A virtualized feed that scrolls 10,000+ items at 60fps
- ✦Optimistic posting, liking, and commenting flows
- ✦Real-time updates without re-fetching the world
- ✦URL-driven filters and shareable feed state
- ✦Server-rendered first paint via Next.js App Router
- ✦A clean separation of server state vs. client state
Production-grade. No hand-waving.
For engineers who want to avoid useEffect antipatterns.
Learn the way to cleanly organize production-grade state in your apps without over-thinking it.
10+ modules covering mental models, applied lessons, virtualization, React 19 features, and Next.js. By the end, you'll design and build a social news feed app from the ground up.
Module I is open. Go in.
~20 minutes of reading. By the end of it you'll never look at a global store the same way.
$100 early-bird · one-time fee · price goes up later