React useState触发无关函数重复执行问题及优化咨询

现象原因 #

1. 组件重渲染机制：当点击按钮修改test状态时，MyPage组件会触发重渲染，组件内所有代码（包括useSomeTest()的调用）都会重新执行一遍，这是React的正常渲染逻辑。
2. react-query 请求重复触发的可能：你设置了staleTime: 60 * 100（6秒），但如果缓存未生成、缓存过期，或者getSomething()内部有额外触发逻辑，组件重渲染时可能会重复发起请求。另外你代码中useSomeTest里的console.log(0)写在return之后，永远不会执行，建议调整位置。

解决方案 #

1. 优化 react-query 缓存配置 #

确保缓存策略符合需求，避免不必要的请求：

• staleTime：控制数据被视为"新鲜"的时长，在此期间组件重渲染不会触发queryFn（即不会调用fetch）。可根据业务需求延长这个值。
• cacheTime：控制数据在缓存中保留的时长，过期后会被垃圾回收。

修改后的useSomeTest：

// myHook.tsx
import { useQuery } from '@tanstack/react-query';

export const useSomeTest = () => {
  console.log(0); // 移到return之前，确保能执行
  return useQuery({
    queryKey: ['something'],
    queryFn: () => getSomething(), // fetch
    staleTime: 60 * 1000, // 延长至1分钟
    cacheTime: 5 * 60 * 1000, // 缓存保留5分钟
  })
}

2. 拆分组件避免无关重渲染 #

将与test状态无关的逻辑拆分为独立子组件，并用React.memo包裹，父组件状态变化时，子组件因无props变更不会重渲染：

// NotRelatedComponent.tsx
'use client';
import { memo } from 'react';
import { useSomeTest } from "@/hooks/myHook";

const NotRelatedComponent = memo(() => {
  const { data: notRelatedCode } = useSomeTest();
  // 按需渲染相关内容，无需渲染则返回null
  return null;
});

export default NotRelatedComponent;

修改后的MyPage：

// page.tsx
'use client';

import NotRelatedComponent from './NotRelatedComponent';
import { useState } from "react";

export default function MyPage() {
  const [test, setTest] = useState(false);

  console.log(1);
  
  return <>
    <div>
      <button onClick={() => {setTest(!test)}}>click me</button>
    </div>
    <NotRelatedComponent />
  </>
}

3. 缓存 Hook 中的复杂逻辑 #

如果useSomeTest包含循环、多轮计算等重操作，用useMemo缓存结果，仅在依赖项变化时重新执行：

// myHook.tsx
import { useQuery, useMemo } from '@tanstack/react-query';

export const useSomeTest = () => {
  const queryResult = useQuery({
    queryKey: ['something'],
    queryFn: () => getSomething(),
    staleTime: 60 * 1000,
  });

  // 用useMemo缓存复杂计算结果
  const heavyProcessedData = useMemo(() => {
    if (!queryResult.data) return null;
    // 模拟复杂循环/计算逻辑
    return queryResult.data.map(item => item * 2);
  }, [queryResult.data]);

  return { ...queryResult, heavyProcessedData };
}

内容的提问来源于stack exchange，提问作者Téwa