Observer pattern là gì? Ứng dụng trong JavaScript/React?

Observer định nghĩa one-to-many dependency: khi một object (Subject/Observable) thay đổi state, tất cả dependents (Observers) được notify tự động.

Ví dụ TypeScript:

class EventEmitter {
  private listeners = new Map<string, Function[]>()

  on(event: string, cb: Function) {
    if (!this.listeners.has(event)) this.listeners.set(event, [])
    this.listeners.get(event)!.push(cb)
  }

  emit(event: string, data?: unknown) {
    this.listeners.get(event)?.forEach(cb => cb(data))
  }
}

• Trong JavaScript: EventEmitter của Node.js, addEventListener trong DOM, RxJS Observable đều là Observer pattern.
• React: useEffect với dependency array là lazy Observer; Redux store notify components khi state thay đổi.
• Pub/Sub là biến thể: thêm message broker trung gian, subject và observer không biết nhau trực tiếp (khác Observer thuần).
• Dùng khi: cần event-driven architecture; khi một thay đổi trigger nhiều phản ứng không biết trước.
• Không dùng khi: dependency graph phức tạp gây 'observer hell' — khó trace execution flow.