Compose, split, and speed up React components: children, compound components, boundaries, and Suspense.
React Essentials taught you to write a component. Advanced React taught you to manage its state. Neither taught you to design a component that somebody else will use, and that is the difference between a developer who can build a screen and one a team hires to build the pieces every screen is made of. This course is that gap, closed.
You start with the component API itself: what happens when a component grows its eleventh prop, and why handing it JSX beats describing the JSX in props. From there it is compound components that share state privately, the render props and higher-order components you will meet in every codebase written before 2019, and refs that reach through your own components to the node inside. Then the machinery underneath: how React decides to keep or throw away what a component remembers, how one thrown error takes a whole screen down and what stops it, how a pane can load only when someone asks for it, and how a dialog escapes the box its parent drew around it.
The last two sections are the ones that separate working code from code a team can live with. You measure what a re-render costs and learn when memoization is worth it and when it is noise, then give every component its own scoped stylesheet. You do all of it on Crew, the board you have been building for two courses, which ends this one as Crew Kit: the same board, rebuilt out of its own reusable parts.
51 Lessons • 59 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 finished Crew Ops. This is the same board, rebuilt from the outside in, with everything React holds back for people who ship components other people import.
Your team asked for a Card everyone can use, and every request adds a prop. This course is the other way to do that.
One component throws and the whole screen is white. Section 6 is about why, and about the twenty lines that stop it.
React Patterns 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. This course assumes components, props, children, lists, keys, events, state, non-mutating updates, refs, reducers, context, effects with cleanup and custom hooks, and it spends all of them without re-teaching any. Devpuff's React Essentials and Advanced React cover exactly that, and both sit ahead of this course in the React Developer program.
Because you will read them. Every React codebase written before 2019 uses both, and library documentation still ships render props today. Section 3 teaches them as history you can read rather than as techniques to reach for, and it ends by rewriting the same behaviour as a hook in a third of the lines.
Because Devpuff runs your React inside a browser sandbox with no React DevTools attached. Section 9 works around it honestly: every exercise states the work it avoids and counts renders, which is the quantity memo actually changes, rather than showing you a millisecond figure the sandbox cannot measure.
Because React 18 has no function-component equivalent, and there is no hook that catches a render error. It is the one class you write in this course and the one class in the whole React Developer program, and section 6 says so rather than pretending classes are back.
Crew, the team board from the two courses before this one, taken apart and rebuilt as a component library. It gains slots, compound tabs, a forwarded ref, an error boundary, a lazily loaded reports pane, a portal dialog, memoized rows, and a scoped stylesheet per component, and finishes as Crew Kit.
Yes. You earn the React Patterns course certificate at 100 percent. This course is also part of Devpuff's React Developer 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.
Type your React code: props, state, hooks, events, and generic components.
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 FreeGo past useState: refs, reducers, context, effects, data fetching, and your own custom hooks.