reactjs - React useQuery により、データの前後に多くの再レンダリングが発生する

Question

API を呼び出すこの単純なアプリがあります。フェッチを行い、データをキャッシュするために、react-query を使用しています。ただし、関数が でラップされていても、React.memo理由useQueryもなく複数の再レンダリングが発生します。8 ではなく 2 レンダリングにする必要があります。

import React, { memo } from "react";
import logo from "./logo.svg";
import "./App.css";
import { useQuery } from "react-query";
import Axios from "axios";

const fetchTodoList = async (key, id) => {
  const { data } = await Axios.get(
    `https://jsonplaceholder.typicode.com/posts/`
  );
  return data;
};

function App() {
  const { isLoading, isError, data, error } = useQuery("todos", fetchTodoList);
  console.log(isLoading, data);
  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  // also status === 'success', but "else" logic works, too
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

export default memo(App);