React父组件刷新时阻止子组件下拉菜单关闭的问题

你的代码存在的核心问题 #

1. Memoized组件定义在父组件内部
   你在LogData组件内部定义了const MemoizedLogSelector = memo(LogSelector);，每次父组件因TanStack Query刷新而重渲染时，这个变量都会被重新创建——相当于每次渲染都使用一个全新的「memo化组件」，完全失去了memo的缓存作用，这就是子组件每次都打印>>> LogSelector is rendering...的根本原因。

2. props传递的冗余包装
   你用useMemo把selectedUrl和setSelectedUrl包装成对象theUrl，虽然useMemo能保证对象引用稳定，但setSelectedUrl本身就是React useState返回的稳定函数（组件生命周期内引用不会变），直接传递两个独立props会更简洁，也能减少浅比较的潜在问题。

修复后的代码示例 #

步骤1：把memo化组件移到父组件外部 #

import { useState, memo } from "react";

// 提前定义并memo化子组件，放在父组件外部
const MemoizedLogSelector = memo(function LogSelector(props: {
  selectedUrl: number,
  setSelectedUrl: React.Dispatch<React.SetStateAction<number>>,
}) {
  console.warn(">>> LogSelector is rendering...");
  return (
    <TextSelectInput
      label="Log Select:"
      labelFontSize="body1"
      labelPlacement="row"
      onChange={(value: number) => props.setSelectedUrl(value)}
      onClear={() => {}}
      options={[
        { label: "Message1", value: 0 },
        { label: "Message2", value: 1 },
        { label: "Message3", value: 2 },
      ]}
      value={props.selectedUrl}
    />
  );
});

function LogData(props: Props) {
  const [selectedUrl, setSelectedUrl] = useState<number>(0);

  // TanStack Query 周期性请求
  const { status, error, data, fetchStatus } = usePeriodicQuery(
    logUrl[selectedUrl],
    updateIntervalMs,
    "myQuery",
    isEnabled.current
  );

  // ...数据解析代码...

  return (
    <>
      <MemoizedLogSelector 
        selectedUrl={selectedUrl} 
        setSelectedUrl={setSelectedUrl} 
      />
      <TableContainer component={Paper}>
        {/* ...表格代码... */}
      </TableContainer>
    </>
  );
}

特殊场景优化：子组件必须放在父组件内部 #

如果因为options依赖父组件变量等原因，必须把LogSelector放在父组件内部，要给memo化组件加上useMemo，确保引用稳定：

function LogData(props: Props) {
  // ...其他代码...

  // 用useMemo包裹memo组件，避免父组件重渲染时创建新引用
  const MemoizedLogSelector = useMemo(() => {
    return memo(function LogSelector(props: {
      selectedUrl: number,
      setSelectedUrl: React.Dispatch<React.SetStateAction<number>>,
    }) {
      // ...子组件代码...
    });
  }, []); // 依赖数组为空，若内部用到父组件动态值需添加对应依赖

  // ...返回JSX...
}

其他可选优化方案 #

1. 拆分组件隔离渲染
   把TanStack Query逻辑和表格渲染单独拆成子组件，让LogData只负责状态管理和渲染下拉选择器、表格组件，这样表格的重渲染不会影响下拉选择器（前提是下拉选择器已被memo化）。

2. 控制TanStack Query重渲染范围
   使用useQuery的select选项过滤返回数据，或开启keepPreviousData减少不必要的重渲染；也可以用useQueryClient手动获取数据，避免组件因query状态变化而重渲染（此方案复杂度较高，建议优先用memo方案）。

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