Rork で作ったアプリが固まる・操作に反応しなくなる問題：原因別の解決策まとめ

// ❌ 問題のある例：フィルター処理がメインスレッドをブロックする
const handleSearch = (query) => {
  const results = hugeDataArray.filter(item =>
    item.name.includes(query) &&
    item.description.includes(query) &&
    item.tags.some(tag => tag.includes(query))
  );
  setFilteredData(results);
};

// ✅ 改善後：非同期で処理して UI をブロックしない
const handleSearch = useCallback(async (query) => {
  setLoading(true);
  // setTimeout(0) でメインスレッドを一瞬解放してから重い処理を実行
  await new Promise(resolve => setTimeout(resolve, 0));
  const results = hugeDataArray.filter(item =>
    item.name.includes(query)
  );
  setFilteredData(results);
  setLoading(false);
}, [hugeDataArray]);

// ❌ 無限ループを引き起こす例
const [userData, setUserData] = useState(null);
 
useEffect(() => {
  fetchUserData().then(data => setUserData(data));
}, [userData]); // userData が更新されるたびに再実行される！

// ✅ 正しい依存配列
useEffect(() => {
  fetchUserData().then(data => setUserData(data));
}, []); // マウント時に一度だけ実行

// ❌ ローディング制御がない例
const handleSubmit = async () => {
  const result = await submitForm(formData); // 処理中も何度でも押せてしまう
  navigate('/success');
};

// ✅ ローディング制御を追加した例
const [isSubmitting, setIsSubmitting] = useState(false);
 
const handleSubmit = async () => {
  if (isSubmitting) return; // 二重送信を防ぐ
  setIsSubmitting(true);
  try {
    const result = await submitForm(formData);
    navigate('/success');
  } catch (error) {
    console.error('送信エラー:', error);
    Alert.alert('エラー', '送信に失敗しました。もう一度お試しください。');
  } finally {
    setIsSubmitting(false); // 成功・失敗どちらでも必ずリセット
  }
};
 
// ボタン側
<TouchableOpacity
  onPress={handleSubmit}
  disabled={isSubmitting}
  style={[styles.button, isSubmitting && styles.buttonDisabled]}
>
  {isSubmitting
    ? <ActivityIndicator color="#fff" size="small" />
    : <Text style={styles.buttonText}>送信</Text>
  }
</TouchableOpacity>

// ❌ キーが重複・未定義になる可能性がある例
<FlatList
  data={items}
  keyExtractor={(item) => item.id} // id が undefined だと "undefined" が大量に重複する
  renderItem={({ item }) => <ItemCard item={item} />}
/>

// ✅ 確実にユニークなキーを設定
<FlatList
  data={items}
  keyExtractor={(item, index) => item.id?.toString() ?? `item-${index}`}
  renderItem={({ item }) => <ItemCard item={item} />}
  // パフォーマンス改善オプション（長いリストに有効）
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={5}
  initialNumToRender={10}
/>

const handlePress = async () => {
  console.log('ボタン押下: 処理開始');
  setIsLoading(true);
  console.log('ローディング状態: true');
  try {
    const data = await fetchData();
    console.log('データ取得成功:', data.length, '件');
    setItems(data);
  } catch (error) {
    console.error('エラー発生:', error.message);
  } finally {
    setIsLoading(false);
    console.log('ローディング状態: false');
  }
};