Terbit/langganan (pub/sub) adalah pola pemesejan di mana penerbit memancarkan peristiwa dan pelanggan bereaksi terhadapnya, tanpa mengenal satu sama lain secara langsung. Banyak perpustakaan keadaan (dan sistem peristiwa) dibangun di atasnya — sebuah toko menerbitkan perubahan dan komponen berlangganan padanya.
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). Ini pada dasarnya adalah cara Redux store.subscribe, Zustand, dan event emitter bekerja 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.
Gandeng longgar ini memungkinkan bagian aplikasi yang tidak berhubungan 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 dipasang), yang menyebabkan kebocoran memori dan dapat menyebabkan panggilan balik dipecat pada komponen yang mati.
useEffect(() => {
const unsub = store.subscribe(handleChange);
return unsub; // ✅ cleanup — unsubscribe on unmount
}, []);
Pub/sub adalah mekanisme yang mendasari sebagian besar perpustakaan keadaan dan sistem peristiwa — memahaminya menghilangkan misteri tentang bagaimana toko memberi tahu komponen dan bagaimana subscribe/unsubscribe bekerja.
Ini menjelaskan kekuatan (komunikasi yang decoupled, fleksibel) dan jebakan (aliran data tersirat yang sulit dilacak, dan kebocoran memori dari langganan yang tidak dibersihkan).
Mengenali pub/sub membantu Anda menalar tentang reaktivitas di bawah topi dan memperkuat pentingnya selalu membersihkan langganan.