Pub-Sub vs Observer in React — Deep Dive, Architecture & Working Demo

In this video, you will learn the Pub-Sub (Publish–Subscribe) Design Pattern in React with real-world architecture, clean code, and practical use cases.
This is part of my React Design Patterns Series, where we turn advanced concepts into simple, production-ready patterns.

In this video, you’ll learn:
✅ What the Pub-Sub Pattern is
✅ How it differs from the Observer Pattern (one-to-many vs many-to-many)
✅ Why React is more aligned with Pub-Sub than traditional Observer
✅ How to build a custom EventBus from scratch
✅ How to use BroadcastChannel API to sync events across browser tabs
✅ Using Pub-Sub as a better alternative to Context API in certain cases
✅ Anti-patterns and mistakes developers must avoid
✅ A fully working React example with step-by-step explanation

🎁 Bonus: Explore the full React Hooks Cheatsheet 👉 https://tapascript.io/books/react-hooks-cheatsheet

Timecodes
0:00 - Where Do We Stand?
01:47 - Notifications
02:52 - Observer Pattern
05:18 - Pub-Sub Pattern
09:30 - Which one is React’s Favourite?
10:41 - Pub-Sub App With React
12:33 - Before We Code
13:35 - Create an EventBus
21:54 - The useEvent Hook
24:17 - The Pubslihser Component
29:36 - The Subscriber Component
34:39 - Broadcasting
43:01 - React Context API vs Pub-Sub
44:33 - Use Cases and Anti-Patterns
47:08 - Tasks

React’s Context API is powerful, but when your app grows, context re-renders and component coupling become real problems.
The Pub-Sub pattern solves this by creating decoupled, event-driven communication across your entire app — even across multiple tabs.

🔔 Don’t forget to Like, Subscribe, and turn on Notifications to continue your React Design Pattern journey.

- ⭐ Subscribe: https://www.youtube.com/tapasadhikary
- ⭐ Join: https://www.youtube.com/channel/UCaYr5yxgOyk599Mnb3TGh-g/join

## Important Links

- Join My Discord: https://discord.gg/ux9BchWEW3
- Follow tapaScript on GitHub: https://github.com/tapascript
- Download the Template: https://topmate.io/tapasadhikary/1737706
- Fake API Repo: https://github.com/tapascript/fake-apis
- Source Code Used: https://github.com/tapascript/15-days-of-react-design-patterns
- Code in React 19 Repo: https://github.com/atapas/code-in-react-19

## If you enjoyed this, check out my other popular series: 40 Days of JavaScript

✅ Start 40 Days of JavaScript:
- https://youtu.be/t8QXF85YovE?si=r9sGtJZPtgBl2V27

✅ Here is another JavaScript Learning Path I recommend:
- https://scrimba.com/t0js?via=tapascript

✅ Download the 40 Days of JavaScript Tracker Template:
- Link to the template: https://topmate.io/tapasadhikary/382755
## 👋 Like my work?

Thank You!
- Join as a Member: https://www.youtube.com/channel/UCaYr5yxgOyk599Mnb3TGh-g/join
- Sponsor Me: https://github.com/sponsors/atapas
- Sponsor my Blog: https://blog.greenroots.info/sponsor

## 🤝 My Links:

- Blog: https://blog.greenroots.info/
- Follow on X(Twitter): https://twitter.com/tapasadhikary
- Connect on LinkedIn: https://www.linkedin.com/in/tapasadhikary/
- Follow My Work on GitHub: https://github.com/atapas

## About Me:

Tapas Adhikary is an Educator at tapaScript, a Tech enthusiast, Writer, YouTuber, and maintainer/contributor of open-source projects. He is a full-stack developer with vast experience building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community.

You can find more about him at https://tapasadhikary.com & https://tapascript.io

#reactjs #designpatterns #reactcourse #learnreact

Видео Pub-Sub vs Observer in React — Deep Dive, Architecture & Working Demo канала tapaScript by Tapas Adhikary