React中如何避免动态创建的组件重复挂载？

场景与问题重现 #

在代码库中，存在从自定义Hook返回动态创建React组件的场景，示例如下：

function useSomeHook() {
  const val = useVal();

  return {
    val,
    DynamicComponent: () => {
      doSomething1(val);
      return /* 组件内容 */;
    },
  };
}

组件侧的使用方式：

function App() {
  const { val, DynamicComponent } = useSomeHook();
  doSomething2(val);

  return <DynamicComponent />;
}

注：App直接从useSomeHook获取val而非自行调用useVal，是因为useVal可能存在较高性能开销，或是重构成本过高。

核心问题：由于每次useSomeHook执行时都会创建新的DynamicComponent函数，其引用在App每次重渲染时都会变化。React会将引用不同的组件视为全新组件，导致DynamicComponent每次都会被重新挂载，引发不必要的性能损耗或内部状态丢失。

现有已知修复方案 #

• 重构代码逻辑，调整useSomeHook的设计，不再返回动态创建的组件
• 通过useRef保持DynamicComponent的引用稳定，再借助上下文、ref传递等机制，让组件能获取到useSomeHook作用域中的最新val

疑问 #

是否存在其他方法，能让React在重渲染后仍将DynamicComponent视为同一组件，即使它的函数引用并不相等？

相关参考场景 #

React：替换父组件但不卸载子组件？

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