Rorkで作ったアプリの日本語入力が『変換中に暴発する』問題を根本解決する

import { useState } from "react";
import { TextInput, View, Text } from "react-native";
 
export default function BrokenSearchBox() {
  const [query, setQuery] = useState("");
  const [callCount, setCallCount] = useState(0);
 
  // ❌ 悪い例：変換中も含めて毎回呼ばれる
  const handleChange = (text: string) => {
    setQuery(text);
    setCallCount((c) => c + 1);
    // 本来はここで検索APIを呼ぶ想定
    console.log("検索API呼び出し:", text);
  };
 
  return (
    <View style={{ padding: 24 }}>
      <TextInput
        value={query}
        onChangeText={handleChange}
        placeholder="検索..."
        style={{ borderWidth: 1, padding: 12, borderRadius: 8 }}
      />
      <Text>API呼び出し回数: {callCount}</Text>
    </View>
  );
}

import { useState, useRef, useEffect } from "react";
import { TextInput, View, Text } from "react-native";
 
export default function DebouncedSearchBox() {
  const [inputValue, setInputValue] = useState("");
  const [committedQuery, setCommittedQuery] = useState("");
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
  useEffect(() => {
    // 300ms変更がなければ「確定した」とみなしてAPIへ
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      setCommittedQuery(inputValue);
    }, 300);
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, [inputValue]);
 
  useEffect(() => {
    if (committedQuery.length === 0) return;
    // ここで実際の検索APIを呼ぶ
    console.log("検索API呼び出し（確定後）:", committedQuery);
  }, [committedQuery]);
 
  return (
    <View style={{ padding: 24 }}>
      <TextInput
        value={inputValue}
        onChangeText={setInputValue}
        placeholder="検索..."
        style={{ borderWidth: 1, padding: 12, borderRadius: 8 }}
      />
      <Text>確定クエリ: {committedQuery}</Text>
    </View>
  );
}

import { useState } from "react";
import { TextInput, View, Text } from "react-native";
 
export default function SubmitBasedSearchBox() {
  const [inputValue, setInputValue] = useState("");
  const [searchResult, setSearchResult] = useState<string[]>([]);
 
  const handleSubmit = () => {
    // このタイミングでは確実に変換確定済み
    console.log("検索実行:", inputValue);
    // モック検索結果
    setSearchResult([`${inputValue}の結果1`, `${inputValue}の結果2`]);
  };
 
  return (
    <View style={{ padding: 24 }}>
      <TextInput
        value={inputValue}
        onChangeText={setInputValue}
        onSubmitEditing={handleSubmit}
        returnKeyType="search"
        placeholder="検索語を入力してEnter"
        style={{ borderWidth: 1, padding: 12, borderRadius: 8 }}
      />
      {searchResult.map((r, i) => (
        <Text key={i}>{r}</Text>
      ))}
    </View>
  );
}

import { useState } from "react";
import { TextInput, View, Text, Pressable } from "react-native";
 
export default function MultilineMemoEditor() {
  const [memo, setMemo] = useState("");
  const [saved, setSaved] = useState(false);
 
  const handleSave = () => {
    // 保存ボタンが押されたときのみ永続化
    console.log("メモを保存:", memo);
    setSaved(true);
  };
 
  return (
    <View style={{ padding: 24 }}>
      <TextInput
        value={memo}
        onChangeText={(t) => {
          setMemo(t);
          setSaved(false);
        }}
        multiline
        placeholder="メモを入力..."
        style={{
          borderWidth: 1,
          padding: 12,
          borderRadius: 8,
          minHeight: 120,
          textAlignVertical: "top",
        }}
      />
      <Pressable
        onPress={handleSave}
        style={{
          marginTop: 16,
          padding: 12,
          backgroundColor: "#0066cc",
          borderRadius: 8,
        }}
      >
        <Text style={{ color: "white", textAlign: "center" }}>保存</Text>
      </Pressable>
      {saved && <Text style={{ marginTop: 8 }}>保存しました</Text>}
    </View>
  );
}

// ❌ 変換中の文字列まで削ったり置き換えたりすると、候補ウィンドウが閉じることがあります
<TextInput
  value={value}
  onChangeText={(t) => setValue(t.replace(/\s/g, "").slice(0, 20))}
/>