Skip to content
New this month 24 fresh C++, C#, F#, JavaScript, TypeScript and Lua courses just landed. Browse new releases Use code WELCOME10 for 10% off your first order · 14-day refund
WisdomCharms — home
Cart 0 items in cart
Web Development Intermediate

React with TypeScript: Typed Components, Hooks and State

Build React applications where props, state and data fetching are all fully typed.

21 students

MH Created by Marcus Hale

  • Last updated August 2026
  • English
  • 12h 48m of material
  • 96 lessons

What you will learn

8 concrete outcomes

Every bullet below is something you will have built, shipped or be able to explain by the time you finish the last lesson.

  • Type component props precisely, including children, unions and polymorphic components
  • Use useState, useReducer, useRef and useContext with correct and inferred types
  • Write custom hooks with generics that infer cleanly at the call site
  • Fetch data with TanStack Query including typed errors, caching and invalidation
  • Build validated forms with React Hook Form and Zod resolvers
  • Type routing parameters and search parameters so navigation cannot drift
  • Profile renders and apply memoisation only where measurements justify it
  • Test components with Vitest and Testing Library, plus Playwright end-to-end flows

Course curriculum

8 modules · 96 lessons · 12h 48m of material

13 lessons running 1h 44m in total. Each lesson ships with the finished source files and a short written recap, so you can follow along in your own editor and skim the module again later.

Lesson-by-lesson titles, code downloads and exercises live inside the course library you get access to straight after checkout.

14 lessons running 1h 52m in total. Each lesson ships with the finished source files and a short written recap, so you can follow along in your own editor and skim the module again later.

Lesson-by-lesson titles, code downloads and exercises live inside the course library you get access to straight after checkout.

12 lessons running 1h 36m in total. Each lesson ships with the finished source files and a short written recap, so you can follow along in your own editor and skim the module again later.

Lesson-by-lesson titles, code downloads and exercises live inside the course library you get access to straight after checkout.

10 lessons running 1h 18m in total. Each lesson ships with the finished source files and a short written recap, so you can follow along in your own editor and skim the module again later.

Lesson-by-lesson titles, code downloads and exercises live inside the course library you get access to straight after checkout.

13 lessons running 1h 44m in total. Each lesson ships with the finished source files and a short written recap, so you can follow along in your own editor and skim the module again later.

Lesson-by-lesson titles, code downloads and exercises live inside the course library you get access to straight after checkout.

12 lessons running 1h 34m in total. Each lesson ships with the finished source files and a short written recap, so you can follow along in your own editor and skim the module again later.

Lesson-by-lesson titles, code downloads and exercises live inside the course library you get access to straight after checkout.

10 lessons running 1h 20m in total. Each lesson ships with the finished source files and a short written recap, so you can follow along in your own editor and skim the module again later.

Lesson-by-lesson titles, code downloads and exercises live inside the course library you get access to straight after checkout.

12 lessons running 1h 40m in total. Each lesson ships with the finished source files and a short written recap, so you can follow along in your own editor and skim the module again later.

Lesson-by-lesson titles, code downloads and exercises live inside the course library you get access to straight after checkout.

8 modules · 96 lessons

12h 48m total length

Requirements

Short list, and deliberately so. If you meet these you can start today.

  • Working React knowledge: components, props, state and effects
  • Comfortable TypeScript basics such as interfaces, unions and generics
  • Node 20 or newer with a Vite React project you can experiment in

About this course

React and TypeScript are each straightforward and slightly awkward together. Component props with children, event handlers, forwarded refs, generic components and context all have a correct typing that is not obvious from either documentation alone. This course covers those seams thoroughly and then builds a real application on top of them.

You start with components and props, discriminated union props that make impossible combinations uncompilable, and typing every hook correctly including useState with lazy initialisation, useReducer with an action union, useRef for both DOM nodes and mutable values, and custom hooks that infer well. Context is covered with a pattern that removes the undefined check from every consumer.

The application half covers routing with typed params, data fetching with TanStack Query and typed error states, forms with React Hook Form and Zod resolvers, tables and lists with virtualisation, and performance work using the React Profiler with memo and useMemo applied where measurements justify them. Testing uses Vitest and Testing Library with typed helpers, plus a Playwright end-to-end suite covering the main flows.

Topics covered

Frequently asked questions

Still unsure about something? Write to misteryjj100@gmail.com and a human answers, usually the same working day.

There is a module comparing the client-side model used here with the React Server Components model, but the application is a Vite single-page app so the material stays framework-neutral.

Server state uses TanStack Query and client state uses reducers and context, with Zustand shown as an alternative. The reasoning for each choice is explained rather than asserted.

No. Everything runs on Vite. The routing module uses React Router with typed parameters, and the concepts transfer to any router.

Checkout is handled on our provider's secure payment page. The moment your payment clears we email your personal access link and access code to the address you used at checkout, and the same link appears in your account library. There is nothing to install and nothing to wait for.

Email misteryjj100@gmail.com within 14 days of your purchase, quote your order number, and we refund the full amount to your original payment method. No form to fill in and no questions about how much of the course you watched.

What students say

No reviews yet

Nobody has reviewed this course yet, so there is no score to show. Buy it, work through it, and your review could be the one that helps the next developer decide.

Browse the catalog

Your instructor

MH

Marcus Hale

Web engineer and JavaScript educator

  • 259 students taught
  • 12 courses published
  • 4.7 instructor rating
  • JavaScript
  • TypeScript
  • React
  • Node.js

Marcus has shipped front ends for two ad-tech startups and one very large retailer, which taught him more about performance budgets than any blog post could. He teaches JavaScript and TypeScript from the runtime up — event loop first, framework second — then follows the same code through Node on the server side. Every one of his courses ends with a deployed application rather than a folder of exercises. He writes a weekly newsletter on browser performance.

See every course by Marcus Hale
$94 USD

One-time payment · lifetime access

The WisdomCharms dispatch

One useful email a week. No fluff, no spam.

New course releases, discount codes before anyone else, and a short, practical breakdown of one technique — a prompt pattern, a C++ idiom, a TypeScript trick — that you can use the same day.

  • Subscriber-only launch pricing
  • Unsubscribe in one click
  • We never sell your address

By subscribing you agree to our Privacy Policy. Questions? Write to misteryjj100@gmail.com.