import React, { useRef, useState, useCallback, useEffect } from "react";

export function App() {
  const ref = useRef<HTMLInputElement>(null);
  const [value, setValue] = useState("");
  const [inComposition, setInComposition] = useState(false);

  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
    (ev) => {
      setValue(ev.target.value);
    },
    []
  );

  const onCompositionStart = useCallback(() => setInComposition(true), []);
  const onCompositionEnd = useCallback(() => setInComposition(false), []);

  useEffect(() => {
    ref.current.addEventListener("keydown", (ev) => {
      console.log(ev.type, ev.key, ev.isComposing, ev.keyCode);
    });
    ref.current.addEventListener("keypress", (ev) => {
      console.log(ev.type, ev.key, ev.isComposing, ev.keyCode);
    });
    ref.current.addEventListener("compositionupdate", (ev) => {
      console.log(ev.type, ev.data);
    });
    ref.current.addEventListener(
      "compositionend",
      (ev) => {
        console.log(ev.type, ev.data);
      },
      { capture: true }
    );
  }, []);

  return (
    <div>
      <p>in composition: {inComposition ? "true" : "false"}</p>
      <input
        type="text"
        ref={ref}
        value={value}
        onChange={onChange}
        onCompositionStart={onCompositionStart}
        // onCompositionUpdate={}
        onCompositionEnd={onCompositionEnd}
      />
    </div>
  );
}


import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";

ReactDOM.render(<App />, document.body);


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>