TanStack Query, Table, Router, Form in 30 React Exercises

For React developers: escape useEffect data fetching. Master TanStack Query, Table, Router and Form in 30 exercises
What you'll learn

---

Treat server data as separate from client state, and write fetching, loading and error handling short and safe with `useQuery`.
Design `queryKey` as the address of the cache, and control refetching with `staleTime` and `gcTime` to balance speed against freshness yourself.
Implement the data operations real UIs need: pagination, infinite scroll, prefetching, `mutation` and optimistic updates.
Understand the Headless idea and build tables with sorting, filtering and paging in TanStack Table while keeping your own look.
Build type-safe routing with TanStack Router, and put search conditions in the URL as shareable screen state.
Design forms that keep re-renders local with TanStack Form, and wire up zod validation and the save.
Requirements

---

The basics of React (components, props, `useState`, `useEffect`) are enough. No TanStack experience is needed at all.
TypeScript at the level of "I can read a type annotation" is plenty. Exercises that ask you to write types come with hints.
A PC with an internet connection and a browser. Exercises run on StackBlitz, so there is no local environment to set up.
Description

---

This course contains the use of artificial intelligence.
All you wanted was to fetch some data in React and put it on screen. Then came loading, errors, refetching, caching, race conditions - and before you knew it your `useEffect` had swollen out of control. This is the hands-on TanStack course for getting out of that.
The heart of this course is30 hands-on exercises, so you never just read or watch. Every topic follows the same rhythm: explain the idea, hand you the keyboard, then walk through the model answer. Across all 84 videos you write real code and run it, again and again. Everything happens on StackBlitz in the browser, so there is no environment to set up. Open the link and the project forks itself; a PC and a browser are all you need. A fake API ships with it (an 800 ms delay and a 10% chance of failure), so slow and failing requests are safe to reproduce.
The content spans four libraries. In section 2 you deliberately feel the pain of fetching with bare `useEffect` - duplicate requests, race conditions, throwaway state. Then TanStack Query: replacing it all with `useQuery`, designing `queryKey` as the address of the cache, the `staleTime` and `gcTime` transitions, pagination, infinite scroll, prefetching, `mutation` and optimistic updates, retries and error UI. TanStack Table teaches the Headless idea; TanStack Router covers type-safe routing and storing state in the URL; TanStack Form covers keeping re-renders local. The capstone merges all four into a single screen.
From "it seems to work" to "I can explain why it's written this way." The aim is not to memorize each API, but to take home the design thinking behind it.
Versions used: React 18, TanStack Query v5, TanStack Table v8, TanStack Router v1, TanStack Form v1, zod v4
Who this course is for

---

React developers who feel the limits of fetching in `useEffect`, or who copy and paste the same loading and error state every time.
Anyone who knows the name TanStack Query and has installed it, but picks `queryKey` and `staleTime` by feel.
Anyone who wants the Headless mindset, so they can build tables and forms without giving up any design freedom.
React Router or Next JS users who want type-safe routing and URL state management in their list of options.
Homepage

---