Most React code does not go wrong because of one bad decision. It goes wrong slowly: a component picks up one more prop, one more useEffect, one more boolean flag, until nobody wants to touch it. Design patterns are the names we give to the refactors that stop that drift. Knowing them lets you see the problem earlier and talk about the fix with your team in one word.

This guide is my study notes for the 15 Days of React Design Patterns series by Tapas Adhikary (tapaScript), turned into a written course. I rewrote every chapter in my own words, moved the code to TypeScript, and added what has changed with React 19 and the React Compiler, because a few of these patterns are now the wrong default and it is worth knowing why.

Who this is for

You already build features with React and hooks, and you want to go from "it works" to "it is easy to change". You should be comfortable with props, state, useEffect and basic TypeScript. Nothing here needs a specific framework; the examples run the same in Vite or Next.js.

How each chapter works

Every chapter follows the same shape, so you can skim or go deep:

  1. A small piece of code with a real smell, and why it hurts.
  2. The pattern, applied step by step to that code.
  3. A second, different example.
  4. How the pattern stands today with React 19.
  5. When to use it, when not to, and the usual pitfalls.
  6. Exercises, plus the original video and source code.

Read the chapter, watch the video if you like learning that way, then do at least one exercise before moving on. The exercises are where the pattern sticks.

The learning path

The chapters follow the order of the original series. If you want a weekly plan, this is how I would split it, about 4 to 6 hours a week:

Week 1: composing components

Week 2: sharing logic

Week 3: state and user experience

Week 4: flexible APIs and resilience

A word of caution

Patterns are tools, not goals. The best outcome of this guide is not that you use all fifteen, it is that you can look at a component, name what is wrong with it, and pick the smallest change that fixes it. Sometimes that change is a pattern. Often it is just splitting a function.

Credits

The structure, the topics and many of the code examples come from tapaScript's open-source series, licensed under Apache-2.0. Each chapter links to the matching video and source folder. If the series helps you, give the repository a star and subscribe to the tapaScript YouTube channel.