Load, cache, and update server data in React: queries, mutations, invalidation, and optimistic updates.
There is a particular piece of code most React developers have written more times than they would like to admit: a `useEffect`, a `fetch`, three `useState` calls, a flag to guard against the response arriving after the component left, and a second flag to guard against a slow answer overwriting a fast one. It is about twenty lines, it is the same twenty lines every time, and it is wrong in at least four ways that only show up in production. This course deletes it.
The reason a library exists for this is one sentence long. Data that came from a server is not state you own: you did not create it, it goes out of date without anyone on this page touching it, several parts of the app want it at once, and reading it can fail. Every feature you will meet here, caching, staleness, invalidation, mutations, optimistic updates, is that one difference being handled properly. Get the sentence and the library stops looking like a pile of options.
You will carry the Crew board through it, the same board you have built across five courses. By the end its roster loads from a query instead of an effect, its member pages are addressed by key, its loading and error states are three lines instead of thirty, saving is a mutation, the list refreshes itself after a write, edits appear before the server answers and roll back when it refuses, and the store you built in React State holds only what it should have held all along.
54 Lessons • 56 Practices • 20 Quizzes • 4 Projects · ~11h Total
Not just theory. You finish this course with real work to show.
This is the same in-browser editor every lesson uses. Edit the code, hit Run.
Run code in the browser and see the result immediately. Every lesson works this way.
Stuck? Puff explains the error and nudges you forward, without giving the answer away.
Streaks, diamonds, and certificates. Your progress saves automatically, forever.
Every completed course issues a certificate with a public verification link.
Every certificate has a public verification link employers can check.
One certificate per course. Finish a program and earn its program certificate too.
LinkedIn-ready, with a PDF you can download and attach.
You know the `useEffect` plus `fetch` plus three `useState` pattern by heart. This course is about deleting it and knowing exactly what you deleted.
Your write worked and the list still shows the old value. Section 7 is that problem, named and fixed.
Query keys, invalidation, and `staleTime` are doing something to your app. This course is what.
React Query is free to start, no credit card needed. Some later sections are part of Pro, and finishing every section, including the certificate, needs a Pro plan.
Yes, more than any other prerequisite. That section had you write fetching by hand, with loading state, error state, cleanup, and a race guard, and then count what it took. React Query is the correction to that code, and a learner who has not written it meets this library as a convenience rather than as an answer.
Yes. The library was renamed: React Query became TanStack Query when versions for Vue, Svelte and Solid arrived, and the package you install is `@tanstack/react-query`. Most people still search for the old name, which is why this course carries it. Anything written for version 3 will not match: `isLoading` became `isPending`, `cacheTime` became `gcTime`, and the arguments became a single object.
No. Every course on Devpuff runs in your browser with nothing listening on a port, so the data comes from a stub that returns real `Response` objects immediately. Your query functions still use `await` and `res.json()`, so the code you write is the code you would write against a real server, and every result is the same every time.
No, and section 1 says exactly which half each one owns. A store holds what your app decides: the filter, the selection, the open dialog. React Query holds what a server decides. Most apps need both and get into trouble by using one for the other.
The Crew board, carried through from the earlier React courses: a roster that loads from a query, member pages keyed by id, a save that writes through a mutation, a list that refreshes itself, edits that appear instantly, and a paged shift history.
Yes. Finish all 134 items and Devpuff issues a certificate with a public verification page you can link from a CV or a profile.
How this course connects to the bigger picture, and what to explore next.
Build React forms that validate: register fields, schema rules, real errors, and clean submits.
Start programming for real: variables, strings, decisions, arrays, loops, functions, and objects.
Free to start, no credit card required. Write real code from the first lesson and keep your progress forever.
Start Learning FreeShare state across a React app with a store: selectors, actions, slices, and when not to.