React useQuery 导致数据前后多次重新渲染

Question

我有一个简单的应用程序，可以调用 API。我正在使用反应查询来进行获取并缓存数据。然而，即使该函数被包装在 中React.memo，useQuery也会无缘无故地导致多次重新渲染。应该是2个效果图而不是8个。

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);

Answer 1

Memo 旨在防止由于父级更改而不是组件本身更改而导致重新渲染。来自memo 文档：

即使使用备忘录，如果组件自身的状态发生变化，它也会重新渲染

就组件本身的状态发生变化的原因而言：useQuery 正在跟踪一堆状态变量！您可以在文档中看到一个列表：

数据、dataUpdatedAt、错误、errorUpdatedAt、failureCount、failureReason、fetchStatus、isError、isFetched、isFetchedAfterMount、isFetching、isInitialLoading、isLoading、isLoadingError、isPaused、isPending、isPlaceholderData、isRefetchError、isRefetching、isStale、isSuccess、重新获取、状态、

每当这些更改发生时，React Query 都需要更新状态，以确保您的应用程序可以响应这些更改。换句话说，当陈旧性发生变化时、当它被垃圾收集时、当网络开始获取时等，都应该触发重新渲染。我怀疑如果您记录了 useQuery 的完整返回，您会在每次重新渲染中看到至少一个不同的值。