Go past useState: refs, reducers, context, effects, data fetching, and your own custom hooks.
React Essentials taught you to describe the screen. You held state, passed props, mapped lists, and built a board that changes when people click it. This course is about everything that lives outside that description: state that has a shape, values that are not state at all, systems that are not React, and logic worth giving a name to. It is the half of React that decides whether an application is still workable a year later.
You work through it in the order the problems actually arrive. First the shape of state itself, because state that can contradict itself is the bug you cannot debug. Then how React decides to keep or throw away what a component remembers. Then refs, the smallest escape hatch React has, which gives you a clean line between what is state and what is not. Reducers and Context follow, and together they are the state layer real applications run on. Effects come last on purpose, with a whole section on the effects you should delete rather than write, because reaching for useEffect first is the most common way React goes wrong.
You do all of it on the board you already built. Crew arrives exactly as you left it, six useState calls in one component, and over eleven sections you rebuild its insides without changing what it does for the person using it. It gains a reducer, then a store, then real data with loading and error states, then hooks of your own. That is what advanced work feels like on a real team: the screen stays still while the code underneath it gets better.
63 Lessons • 66 Practices • 22 Quizzes • 4 Projects · ~13h 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 built Crew and finished the course. This is the same board, rebuilt from the inside with everything React holds back for later.
You write React at your job and reach for useEffect first. This is the model that tells you when not to.
Your components work until the state gets complicated. This course is about the part that gets complicated.
Advanced React 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, and Async JavaScript too. Advanced React assumes you already write components, props, state, lists, and forms without looking them up, and its data-fetching section uses async and await directly. Devpuff's React Essentials and Async JavaScript courses cover exactly what this one spends, and both sit ahead of it in the Full-Stack Development program.
Because reaching for useEffect first is the most common way React code goes wrong, and the React team published a documentation page called "You Might Not Need an Effect" for that reason. Section 9 of this course works through the cases where an effect can simply be deleted, and the board you are building ends that section doing exactly what it did before with four fewer effects.
No, deliberately. Every graded item talks to a stubbed transport that hands back a real Response object, so your code uses real await, real res.ok and real res.json while the result is identical on every run. It also lets the course reproduce a race condition on demand, which a real network only manages by luck.
Because Devpuff runs your React inside a browser sandbox that ships React and React DOM only, so no third-party package can be installed. The course turns that into the lesson: you write correct data fetching by hand, count the lines it took, and only then hear what those libraries are replacing.
Crew, the team board from React Essentials, rebuilt four times. It moves onto a reducer, becomes a store shared through Context, learns to load real data with loading and error states, and finishes as Crew Ops, a capstone that runs the whole state layer through custom hooks you write yourself.
Yes. You earn the Advanced React course certificate at 100 percent. This course is also part of Devpuff's Full-Stack Development program, so it counts toward that program's certificate, which issues once every course in the program is complete.
How this course connects to the bigger picture, and what to explore next.
Build interfaces from components: JSX, props, state, lists, and forms, rendered live as you type.
Write real web pages by hand: document structure, text, links, lists, images, semantic HTML, and forms.
Style real pages with CSS: selectors, the cascade, color, the box model, backgrounds, and typography.
Free to start, no credit card required. Write real code from the first lesson and keep your progress forever.
Start Learning Free