React应用中useEffect结合GraphQL获取数据的性能优化咨询

问题根源 #

你当前的写法存在两个核心问题：

1. 手动通过useEffect触发查询，无法利用Apollo内置的查询生命周期管理能力
2. 将Apollo返回的data同步到组件本地state，额外触发了一次不必要的重渲染

最优解决方案：直接使用Apollo的useQuery钩子 #

Apollo Client提供的useQuery钩子已经封装了数据获取、loading/error状态管理、变量变化自动重查等能力，完全不需要手动写useEffect处理查询触发和状态同步。

代码示例 #

假设你的getDataId对应的是一个GraphQL查询，重构后的代码如下：

import { useQuery, useMemo } from '@apollo/client';
// 导入你的GraphQL查询定义
import GET_REVIEWS_BY_SERIES from './graphql/queries/getReviewsBySeries';

const YourComponent = ({ id }) => {
  const seriesId = parseInt(id);
  
  // 直接用useQuery发起查询，自动处理变量变化、加载状态
  const { data, loading, error } = useQuery(GET_REVIEWS_BY_SERIES, {
    variables: { seriesId },
    // 当seriesId无效时跳过查询，避免不必要的请求
    skip: isNaN(seriesId),
  });

  // 用useMemo缓存计算结果，避免每次渲染重复计算totalReviews
  const totalReviews = useMemo(() => {
    return data?.size ?? 0;
  }, [data]);

  // 加载/错误状态处理
  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;

  // 直接使用Apollo返回的data，无需存入本地state
  return (
    <div>
      <h3>总评论数：{totalReviews}</h3>
      {/* 直接渲染data中的评论数据 */}
      {data?.reviews?.map(review => (
        <div key={review.id}>{review.content}</div>
      ))}
    </div>
  );
};

特殊场景处理（若必须存入本地state） #

如果业务上确实需要将数据存入组件本地state，也无需用两个useEffect，可以利用useQuery的onCompleted回调直接处理：

const { data, loading, error } = useQuery(GET_REVIEWS_BY_SERIES, {
  variables: { seriesId },
  skip: isNaN(seriesId),
  // 查询完成后直接设置本地state
  onCompleted: (queryData) => {
    setReviewsData(queryData);
    setTotalReviews(queryData.size);
  },
});

为什么这样性能更好 #

• 消除了手动useEffect带来的额外重渲染：Apollo的钩子会直接管理数据状态，无需同步到本地state
• 自动处理查询生命周期：当seriesId变化时，useQuery会自动触发新查询，无需手动监听
• 利用useMemo缓存计算结果，避免重复计算导致的性能损耗

内容的提问来源于stack exchange，提问作者Caolan Fanning