Reactで、日本語の変換が終わってから検索を動かす方法

// 検索の代わり。呼ばれた回数と、渡された文字列を記録する
export const searchLog: string[] = [];

export function search(query: string) {
  searchLog.push(query);
}

import { useState, type ChangeEvent } from 'react';
import { search } from './search';

// 比べるための、onChange のたびに検索する入力欄
export function SearchNaive() {
  const [text, setText] = useState('');

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setText(e.target.value);
    search(e.target.value);
  }

  return <input aria-label="検索" value={text} onChange={handleChange} />;
}

「ねこ」と打って「猫」で確定
  検索の呼び出し: ["ｎ","ね","ねｋ","ねこ","猫"]
続けて「じゃらし」と打って、そのまま確定
  検索の呼び出し: ["猫ｊ","猫じ","猫じｙ","猫じゃ","猫じゃｒ","猫じゃら","猫じゃらｓ","猫じゃらし"]

compositionstart
input isComposing=true value=ｎ
input isComposing=true value=ね
input isComposing=true value=ねｋ
input isComposing=true value=ねこ
input isComposing=true value=猫
input isComposing=true value=猫
compositionend data=猫

import type { ChangeEvent } from 'react';

// React の ChangeEvent の nativeEvent から isComposing を読めるかを、型チェックで確かめる
export function handleChange(e: ChangeEvent<HTMLInputElement>) {
  if (e.nativeEvent.isComposing) return;
}

src/ProbeIsComposing.tsx(5,21): error TS2339: Property 'isComposing' does not exist on type 'Event'.

function handleChange(e: ChangeEvent<HTMLInputElement>) {
  setText(e.target.value);
  if ((e.nativeEvent as InputEvent).isComposing) return;
  search(e.target.value);
}

「ねこ」と打って「猫」で確定
  検索の呼び出し: []
続けて「じゃらし」と打って、そのまま確定
  検索の呼び出し: []
続けて、変換なしで「cat」と打つ
  検索の呼び出し: ["猫じゃらしc","猫じゃらしca","猫じゃらしcat"]

import { useState, type ChangeEvent, type CompositionEvent } from 'react';
import { search } from './search';

// 変換中は入力欄の表示だけを更新し、検索は変換が終わってから動かす
export function SearchAfterComposition() {
  const [text, setText] = useState('');

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setText(e.target.value); // 表示はいつも更新する
    if ((e.nativeEvent as InputEvent).isComposing) return; // 変換中は検索しない
    search(e.target.value);
  }

  function handleCompositionEnd(e: CompositionEvent<HTMLInputElement>) {
    search(e.currentTarget.value); // 変換が終わったときに検索する
  }

  return (
    <input aria-label="検索" value={text} onChange={handleChange} onCompositionEnd={handleCompositionEnd} />
  );
}

「ねこ」と打って「猫」で確定
  検索の呼び出し: ["猫"]
続けて「じゃらし」と打って、そのまま確定
  検索の呼び出し: ["猫じゃらし"]
続けて、変換なしで「cat」と打つ
  検索の呼び出し: ["猫じゃらしc","猫じゃらしca","猫じゃらしcat"]
Backspace を1回押す
  検索の呼び出し: ["猫じゃらしca"]

[onCompositionEnd で直接検索する書き方（SearchAfterComposition）]
  検索の呼び出し: ["猫じゃらしcat"]

import { useEffect, useState, type ChangeEvent } from 'react';
import { search } from './search';

// 表示用の text と、検索に使う query を分ける。検索は query が変わったときだけ動く
export function SearchWithQuery() {
  const [text, setText] = useState('');
  const [query, setQuery] = useState('');

  useEffect(() => {
    if (query === '') return;
    search(query);
  }, [query]);

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setText(e.target.value);
    if ((e.nativeEvent as InputEvent).isComposing) return;
    setQuery(e.target.value);
  }

  return (
    <input
      aria-label="検索"
      value={text}
      onChange={handleChange}
      onCompositionEnd={(e) => setQuery(e.currentTarget.value)}
    />
  );
}

[検索に使う state を分けた書き方（SearchWithQuery）]
  検索の呼び出し: []