Workaround composition event problem in controlled React input components.

async-input-helper.ts

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

export function useAsyncInputRef<T extends HTMLElement & { value: string }>(
  value: string,
  forwardRef?: React.RefObject<T>
) {
  const [compositionFlag, setComposition] = useState(false);
  const newRef = useRef<T>(null);
  const ref = forwardRef || newRef;

  useEffect(() => {
    const el = ref.current;
    if (el) {
      const compositionStart = () => setComposition(true);
      const compositionEnd = () => setComposition(false);
      el.addEventListener("compositionstart", compositionStart);
      el.addEventListener("compositionend", compositionEnd);
      return () => {
        el.removeEventListener("compositionstart", compositionStart);
        el.removeEventListener("compositionend", compositionEnd);
        setComposition(false);
      };
    }
  }, [ref]);

  useEffect(() => {
    if (ref.current && compositionFlag === false) {
      ref.current.value = value;
    }
  }, [compositionFlag, value, ref]);

  return ref;
}

render(
  <input
    type="text"
    ref={useAsyncInputRef(value)}
    onChange={(e) => setValue(e.target.value)}
  />
);

Live demo: https://codepen.io/kamikat/pen/OJwMJLr