Publish/subscribe (pub/sub) adalah pola pengiriman pesan di mana penerbit memancarkan acara dan pelanggan bereaksi terhadapnya, tanpa saling mengenal secara langsung. Banyak perpustakaan keadaan (dan sistem peristiwa) dibangun di atasnya — sebuah toko menerbitkan perubahan dan komponen berlangganan mereka.
function createStore(initial) {
let state = initial;
const subscribers = new Set();
return {
getState: () => state,
setState(next) {
state = { ...state, ...next };
subscribers.forEach((fn) => fn(state)); // PUBLISH: notify all subscribers
},
subscribe(fn) {
subscribers.add(fn); // SUBSCRIBE
return () => subscribers.delete(fn); // return an unsubscribe function
},
};
}
Komponen memanggil subscribe(callback) untuk diberitahu; toko memanggil setiap pelanggan ketika keadaan berubah (setState). Inilah cara kerja Redux store.subscribe, Zustand, dan pengguna acara di balik layar.
Publisher (the store) doesn't know WHO is listening.
Subscribers don't know WHO published.
→ They're decoupled, communicating only through the event/store.
Pengikatan longgar ini memungkinkan bagian-bagian aplikasi yang tidak terkait untuk bereaksi terhadap perubahan yang sama tanpa referensi langsung satu sama lain — fleksibel dan dapat diperluas.
✓ Pros: decoupled, flexible, many-to-many communication, easy to add listeners
✗ Cons:
- Implicit flow — hard to trace WHO reacts to an event (vs explicit calls)
- Memory leaks — forgetting to UNSUBSCRIBE keeps dead listeners alive
- Debugging — indirection makes "why did this run?" harder to answer
- Ordering — subscriber execution order can be non-obvious
Bahaya praktis terbesar adalah lupa untuk berhenti berlangganan (misalnya saat komponen tidak terpasang), yang menyebabkan kebocoran memori dan dapat memicu panggilan balik pada komponen mati.
useEffect(() => {
const unsub = store.subscribe(handleChange);
return unsub; // ✅ cleanup — unsubscribe on unmount
}, []);
Pub/sub adalah mekanisme dasar dari sebagian besar perpustakaan keadaan dan sistem peristiwa — memahaminya menjelaskan bagaimana toko memberi tahu komponen dan bagaimana subscribe/unsubscribe bekerja.
Ini menjelaskan kekuatan (komunikasi decoupled yang fleksibel) dan jebakan (aliran data implisit yang sulit dilacak, dan kebocoran memori dari langganan yang tidak dibersihkan).
Mengenali pub/sub membantu Anda memahami reaktivitas di balik layar dan memperkuat pentingnya selalu membersihkan langganan.