utility hook for event communication in React components

useEventBus.ts

import { useEffect, useState } from 'react';

type Callback = (data?: any) => void;

class EventBus<E extends string = string> {
  events: Partial<Record<E, Callback[]>>;

  constructor() {
    this.events = {};
  }

  on(event: E, callback: Callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event]!.push(callback);
  }

  off(event: E, callback: Callback) {
    if (!this.events[event]) {
      return;
    }
    this.events[event] = this.events[event]!.filter((fn) => fn !== callback);
  }

  clear() {
    this.events = {};
  }

  emit(event: E, data?: any) {
    if (!this.events[event]) {
      return;
    }
    this.events[event]!.forEach((callback) => callback(data));
  }
}

export default function useEventBus<E extends string = string>() {
  const [bus] = useState(new EventBus<E>());

  useEffect(() => () => bus.clear(), []);

  return bus;
}