Observer Pattern: Building Reactive UIs in JavaScript

The Observer pattern is fundamental to modern frontend development, forming the basis of reactive programming. It’s particularly useful when you need to maintain synchronization between different parts of your application.

Here’s a practical implementation of a simple state management system:

class Store {
  constructor(initialState = {}) {
    this.state = initialState;
    this.observers = new Set();
  }

  subscribe(observer) {
    this.observers.add(observer);
    return () => this.observers.delete(observer);
  }

  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.notify();
  }

  notify() {
    this.observers.forEach(observer => observer(this.state));
  }
}

// Usage in a UI component
const store = new Store({ count: 0 });

// Subscribe to state changes
const unsubscribe = store.subscribe(state => {
  document.getElementById('counter').textContent = state.count;
});

// Update state
document.getElementById('increment').addEventListener('click', () => {
  store.setState({ count: store.state.count + 1 });
});

This pattern is the foundation of many state management libraries like Redux and MobX. It allows for loose coupling between components while maintaining a predictable data flow in your application.

Remember to clean up subscriptions when components unmount to prevent memory leaks. The unsubscribe function returned by the subscribe method makes this cleanup straightforward.