React Query useSuspenseQuery遇状态更新组件引发重复渲染问题

1. 为何Header更新状态会导致Body重渲染？ #

核心是两次独立的渲染更新触发：

• 第一次是React Query异步请求完成，Suspense恢复，触发组件树重新渲染（包含Body）；
• 第二次是Header内部setTimeout触发状态更新，若Header与Body共享的父组件未做渲染优化（比如未用React.memo包裹），父组件会跟着重渲染，进而带动Body重渲染。
  如果Header的状态是定义在父组件中，那Header调用父组件的setState会直接触发父组件重渲染，Body作为子组件自然会跟着重渲染。

2. API请求与定时器的时序为何会影响该行为？ #

这取决于两个更新的触发时机：

• 当API请求时长与定时器时长接近时，Suspense恢复的更新和Header状态更新的更新会在极短时间内先后触发，React无法将这两个更新合并为一次渲染，因此会触发两次组件树渲染，Body也就渲染了两次。
• 若延长定时器时长至1000ms，API请求早已完成，Suspense恢复的渲染已经结束，此时Header的状态更新只会触发Header自身（或父组件）的重渲染，而Body因为已经拿到React Query的缓存数据，且没有props/state变化，不会重复渲染。
• 移除Header后，只有Suspense恢复这一次更新，Body自然只渲染一次。

3. 如何在保留Suspense的前提下避免Body重复渲染？ #

可以通过以下几种方式优化：

• 用React.memo包裹Body组件：React.memo会对Body的props做浅比较，只要props没有变化，就会跳过重渲染。即使父组件重渲染，Body也不会跟着渲染。示例：

  const Body = React.memo(() => {
    const { data } = useSuspenseQuery({ 
      queryKey: ['your-data-key'], 
      queryFn: yourFetchFunction 
    });
    return <div>{data}</div>;
  });
  

• 隔离Header的状态更新范围：如果Header的状态是定义在父组件中，将状态下移到Header组件内部，让Header的状态更新只影响自身，不会触发父组件重渲染。
• 优化父组件：用React.memo包裹父组件，确保只有父组件自身的state/props变化时才会重渲染，避免不必要的子组件渲染。

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