A hook to prevent useCallback in handlers

useListener.js

import EventEmitter from "events";
import { useCallback, useEffect, useRef } from "react";

export default function useListener(listener = () => {}) {
  const emitter = useRef(new EventEmitter());

  useEffect(() => {
    const currentEmitter = emitter.current;
    currentEmitter.on("event", listener);
    return () => {
      currentEmitter.off("event", listener);
    };
  }, [listener]);

  const dispatch = useCallback((...payload) => {
    emitter.current.emit("event", ...payload);
  }, []);

  return [dispatch, emitter];
}

z.example.js

import useListener from './useListener'

function Table({ onChangeSelection }) {
  const [value] = useTable(config)

  const [dispatch] = useListener(onChangeSelection)
  const { selected } = value.state
  useEffect(()=> {
    dispatch(selected)
    // dispatch won't change when onChangeSelection changes
  }, [selected, dispatch])

  // ...
}

function Page() {
  const [selection, setSelection] = useState({})
  const handleSelection = useCallback(, [])
  return (
    <div>
      <OtherComponent selection={selection} />
      {/* we can use inline functions for handlers with ease now */}
      <Table onChangeSelection={(value) => setSelection(value)} />
    </div>
  )
}