React组件因useTest钩子多次重渲染，如何等待完成后再渲染h1？

方案1：等待异步数据就绪后再渲染h1 #

你的组件多次重渲染大概率是因为useTest里的GQL查询处于加载→数据返回→Context更新的多阶段状态变化，每次状态变动都会触发组件渲染。可以通过判断数据是否就绪，延迟渲染h1：

import React from 'react'

const AccountDetail = () => {
  console.log('RENDER!!!', new Date())
  const { test, loading, error } = useTest() // 假设useTest返回加载/错误状态

  // 加载中返回空或加载提示，不渲染h1
  if (loading) return null;
  if (error) return <div>加载出错</div>;

  return <h1>{new Date().getMilliseconds()}</h1>
}

export default AccountDetail

如果useTest没暴露loading状态，也可以通过判断test是否有有效值来控制：

// 假设test初始为null/undefined，数据返回后才有值
if (!test) return null;

方案2：优化useTest的返回值，减少不必要的重渲染 #

如果useTest每次返回的test都是新对象（即使内容没变），也会触发组件重渲染。可以在useTest内部用useMemo缓存返回值：

// 在useTest钩子内部
const useTest = () => {
  const { data } = useQuery(TEST_QUERY);
  const contextValue = useContext(TestContext);
  
  // 用useMemo缓存返回对象，仅当data或contextValue变化时更新引用
  return useMemo(() => ({
    test: data?.test || contextValue.test
  }), [data, contextValue]);
}

这样只要data和contextValue没变化，useTest返回的对象引用就不变，组件不会因为引用变化触发不必要的重渲染。

方案3：用React Suspense等待数据加载（需GQL客户端支持） #

如果你的GQL客户端支持Suspense（比如Apollo Client 3+、Relay），可以用Suspense让组件等待数据加载完成后再渲染：

// 父组件中包裹Suspense
import { Suspense } from 'react';
import AccountDetail from './AccountDetail';

const ParentComponent = () => {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <AccountDetail />
    </Suspense>
  );
}

同时确保useTest里的查询配置了suspend: true（以Apollo为例），组件会等到数据完全加载后才挂载，不会出现多次重渲染导致的闪烁。

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