SWRのkeepPreviousDataでユーザー体験を改善する実装ガイド

function SearchPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const { data, error, isLoading } = useSWR(
    `search-${searchQuery}`,
    () => fetchSearchResults(searchQuery)
  );

  // よくある実装パターン
  if (isLoading) {
    return <div>検索中...</div>;
  }

  if (error) {
    return <div>エラーが発生しました</div>;
  }

  return (
    <div>
      <input 
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="検索..."
      />
      {/* 検索結果の表示 */}
      {data?.map(item => <Item key={item.id} {...item} />)}
    </div>
  );
}

function ImprovedSearchPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const { data, error, isLoading } = useSWR(
    `search-${searchQuery}`,
    () => fetchSearchResults(searchQuery),
    {
      keepPreviousData: true, // ← これを追加するだけ！
    }
  );

  return (
    <div>
      <input 
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="検索..."
      />
      
      {/* ローディング状態を別途表示 */}
      {isLoading && (
        <div className="loading-indicator">検索中...</div>
      )}
      
      {/* 前のデータを保持しながら新しいデータを表示 */}
      {data?.map(item => <Item key={item.id} {...item} />)}
    </div>
  );
}

interface User {
  id: number;
  name: string;
  email: string;
  department: string;
}

const fetchUsers = async (query: string): Promise<User[]> => {
  // APIコールをシミュレート
  await new Promise(resolve => setTimeout(resolve, 800));
  
  // 検索ロジック
  if (!query) return allUsers;
  return allUsers.filter(user => 
    user.name.includes(query) || 
    user.email.includes(query) || 
    user.department.includes(query)
  );
};

export default function UserSearchPage() {
  const [searchQuery, setSearchQuery] = useState('');

  const { data: users, error, isLoading } = useSWR(
    searchQuery ? `users-${searchQuery}` : 'users',
    () => fetchUsers(searchQuery),
    {
      keepPreviousData: true,
      revalidateOnFocus: false,
    }
  );

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">ユーザー検索</h1>
      
      {/* 検索フォーム */}
      <div className="mb-6">
        <input
          type="text"
          placeholder="ユーザーを検索（名前、メール、部署）"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      {/* ローディング状態の表示 */}
      {isLoading && (
        <div className="mb-4 text-sm text-blue-600">
          🔍 検索中...
        </div>
      )}

      {/* エラー処理 */}
      {error && (
        <div className="mb-4 p-3 bg-red-100 text-red-700 rounded">
          エラーが発生しました: {error.message}
        </div>
      )}

      {/* ユーザーリスト */}
      <div className="grid gap-4">
        {users && users.length > 0 ? (
          users.map((user) => (
            <div key={user.id} className="bg-white p-4 border border-gray-200 rounded-lg shadow-sm">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="font-semibold text-lg">{user.name}</h3>
                  <p className="text-gray-600">{user.email}</p>
                </div>
                <span className="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
                  {user.department}
                </span>
              </div>
            </div>
          ))
        ) : (
          <div className="text-center py-8 text-gray-500">
            ユーザーが見つかりませんでした
          </div>
        )}
      </div>
    </div>
  );
}