Stage 11 · Your Framework Track

React Track

React 19 in depth, server state, forms, and Next.js for production apps.

weeks at ~2h/day: ~10
weeks full-time: ~5

Your progress0 / 8

Why this stage matters

React has the largest job market in frontend. Modern React is more than hooks: Server Components, Actions, and the React Compiler changed how apps are built, and Next.js is where most of that comes together.

What to learn

Must know
Components, Props, State & JSX
Thinking in components, lifting state up, lists and keys, conditional rendering, and composition with children.
You're done when
- You can split any UI into a component tree and decide where each piece of state lives.
- You know why array index is a bad key for dynamic lists.
Resources
Must know
Hooks & Effects (the Right Way)
useState, useReducer, useRef, useContext, custom hooks, and when you do not need useEffect at all.
You're done when
- You don't use useEffect to compute derived state or to react to user events.
- You have extracted at least three custom hooks in your projects.
Resources
- React Hooks MasteryBy Shadow Coding · Course · Arabic
- react.dev — You Might Not Need an EffectDocs
Must know
Modern React: Actions, use(), Compiler
Form Actions, useActionState, useOptimistic, useFormStatus, the use() API, Suspense, and the React Compiler, which handles most manual memoization for you.
You're done when
- You can build a form with an Action, pending state, and an optimistic update.
- You know when useMemo and useCallback are still needed with the compiler on.
Resources
- React 19 release notesDocs
- React CompilerDocs
Must know
Server State & Client State
TanStack Query for data from APIs (caching, refetching, mutations), and a small store like Zustand only for true client state.
You're done when
- You never copy API data into a global store just to share it.
- You can invalidate and refetch after a mutation.
Resources
- TanStack QueryDocs
- ZustandDocs
Must know
Forms & Routing
React Hook Form with schema validation for complex forms, and client-side routing with React Router or TanStack Router.
You're done when
- You can build a multi-step form with validation and accessible error messages.
Resources
- React Hook FormDocs
- React RouterDocs
Learn next
Component Patterns & Architecture
Composition, compound components, custom hooks as the unit of reuse, controlled vs uncontrolled components, and folder structure that scales. This is what separates a working app from a maintainable one.
You're done when
- You can refactor a 300-line component into smaller pieces without changing its behaviour.
- You can build a compound component (like Tabs or Accordion) with a clean public API.
Resources
Must know
Next.js (App Router)
Server and Client Components, layouts, data fetching, Server Actions, caching with Cache Components and 'use cache', streaming with loading.tsx, metadata for SEO, and route handlers.
You're done when
- You decide per component whether it runs on the server or the client, and can explain the 'use client' boundary.
- You know which of your pages are static, dynamic, or cached, and why.
Resources
- Next.js LearnCourse
- Next.js DocsDocs
Optional
Other React Meta-frameworks
React Router (framework mode), TanStack Start, and Astro with React islands. Know they exist and what they are good at.
You're done when
- You can name one case where Astro would beat Next.js.
Resources
- TanStack StartDocs
- AstroDocs

Common mistakes

Using useEffect for everything. Most effects in beginner code should not exist.
Putting 'use client' at the top of every file in Next.js, which throws away the benefits of Server Components.
Reaching for Redux on day one. Most apps need server-state caching, not a global store.

Checkpoint

You can build and deploy a full Next.js app with server-rendered pages, mutations, and a clean split between server and client code.

Stage project

Job Board with Next.js

A job board where companies post jobs and developers search, filter, and save them.

Done when

Job pages are server-rendered with proper metadata and appear correctly when shared.
Filters live in the URL.
Posting a job uses a Server Action with validation and an optimistic UI.
Green Core Web Vitals on the deployed site.

Last reviewed November 2, 2026 · Full roadmap

What to learn

Must know

Components, Props, State & JSX

Thinking in components, lifting state up, lists and keys, conditional rendering, and composition with children.

You're done when

You can split any UI into a component tree and decide where each piece of state lives.
You know why array index is a bad key for dynamic lists.

Resources

Must know

Hooks & Effects (the Right Way)

useState, useReducer, useRef, useContext, custom hooks, and when you do not need useEffect at all.

You're done when

You don't use useEffect to compute derived state or to react to user events.
You have extracted at least three custom hooks in your projects.

Resources

Must know

Modern React: Actions, use(), Compiler

Form Actions, useActionState, useOptimistic, useFormStatus, the use() API, Suspense, and the React Compiler, which handles most manual memoization for you.

You're done when

You can build a form with an Action, pending state, and an optimistic update.
You know when useMemo and useCallback are still needed with the compiler on.

Resources

Must know

Server State & Client State

TanStack Query for data from APIs (caching, refetching, mutations), and a small store like Zustand only for true client state.

You're done when

You never copy API data into a global store just to share it.
You can invalidate and refetch after a mutation.

Resources

Must know

Forms & Routing

React Hook Form with schema validation for complex forms, and client-side routing with React Router or TanStack Router.

You're done when

You can build a multi-step form with validation and accessible error messages.

Resources

Learn next

Component Patterns & Architecture

Composition, compound components, custom hooks as the unit of reuse, controlled vs uncontrolled components, and folder structure that scales. This is what separates a working app from a maintainable one.

You're done when

You can refactor a 300-line component into smaller pieces without changing its behaviour.
You can build a compound component (like Tabs or Accordion) with a clean public API.

Resources

Must know

Next.js (App Router)

Server and Client Components, layouts, data fetching, Server Actions, caching with Cache Components and 'use cache', streaming with loading.tsx, metadata for SEO, and route handlers.

You're done when

You decide per component whether it runs on the server or the client, and can explain the 'use client' boundary.
You know which of your pages are static, dynamic, or cached, and why.

Resources

Optional

Other React Meta-frameworks

React Router (framework mode), TanStack Start, and Astro with React islands. Know they exist and what they are good at.

You're done when

You can name one case where Astro would beat Next.js.