Rork が自分で直せない3割を見極める — エクスポート前提の手直しワークフロー

// hooks/useArticles.ts
// 生成直後はコンポーネント内に直書きされがちな fetch を、まずフックへ隔離する。
// 手直しの対象を「この1ファイル」に固定できるのが狙い。
import { useEffect, useRef, useState } from "react";
 
type Article = { id: string; title: string };
 
export function useArticles(query: string) {
  const [data, setData] = useState<Article[]>([]);
  const [loading, setLoading] = useState(false);
 
  useEffect(() => {
    setLoading(true);
    fetch(`https://api.example.com/articles?q=${encodeURIComponent(query)}`)
      .then((r) => r.json())
      .then((json) => setData(json.items))
      .finally(() => setLoading(false));
  }, [query]);
 
  return { data, loading };
}

// hooks/useArticles.ts（修正版）
import { useEffect, useRef, useState } from "react";
 
type Article = { id: string; title: string };
 
export function useArticles(query: string) {
  const [data, setData] = useState<Article[]>([]);
  const [loading, setLoading] = useState(false);
  const latestReq = useRef(0); // 最新リクエストの通し番号
 
  useEffect(() => {
    const reqId = ++latestReq.current; // この実行のID
    setLoading(true);
 
    fetch(`https://api.example.com/articles?q=${encodeURIComponent(query)}`)
      .then((r) => r.json())
      .then((json) => {
        // 自分が最新でなければ結果を捨てる（古いレスポンスの上書きを防ぐ）
        if (reqId === latestReq.current) {
          setData(json.items);
        }
      })
      .finally(() => {
        if (reqId === latestReq.current) setLoading(false);
      });
  }, [query]);
 
  return { data, loading };
}

// 落ちやすい例: state の配列を直接 splice し、別の参照とずれる
function removeFavorite(index: number) {
  favorites.splice(index, 1);      // state を破壊的に変更
  setFavorites(favorites);         // 同一参照なので再描画が安定しない
  setSelected(favorites[index]);   // 削除でずれたインデックスを参照 → undefined
}

// 根治版: 防御的コピー + 値ベースの参照
function removeFavorite(id: string) {
  setFavorites((prev) => {
    const next = prev.filter((f) => f.id !== id); // 新しい配列を返す
    return next;
  });
  // インデックスではなく id で選択状態を判断する
  setSelected((cur) => (cur?.id === id ? null : cur));
}