Functional Component with minimum external store with event handling

EventFCSample.ts

import { EventEmitter } from "events";
import * as React from "react";
import { createContext, useContext, useState } from "react";

const useEmitter = <T extends EventEmitter>(emitter: T) => {
  const [_updateCounter, setUpdateCounter] = useState(() => {
    let counter = 0;
    emitter.on("change", () => {
      setUpdateCounter(++counter);
    });
    return counter;
  });
};

const sampleContext = createContext({ emitter: new EventEmitter(), i: 0 });

export const FunctionalComponent = () => {
  const context = useContext(sampleContext);
  useEmitter(context.emitter);
  return (
    <div>
      {context.i}
      <button
        onClick={() => {
          context.i = context.i + 1;
          context.emitter.emit("change");
        }}
      >
        click
      </button>
    </div>
  );
};