组件作为prop传递时出现Stale props/子组件不重新渲染问题如何解决？

• 检查useMemo依赖完整性：当前依赖数组仅包含soundsBeingPlayed，如果onSoundPress、onPlacePress未通过useCallback包裹、且未加入依赖数组，useMemo会一直复用首次生成的组件实例，子组件无法拿到更新后的回调与状态值。
• 检查状态更新的引用变化：如果更新soundsBeingPlayed时是直接修改原数组/对象（比如调用push、直接修改属性）而非返回新的引用，React 不会触发状态更新，useMemo也不会重新计算生成新的组件实例。
• 检查子组件的渲染逻辑：可以在Sounds、Places组件内通过useEffect监听soundsBeingPlayed的变化，确认是否是子组件内部逻辑导致拿到新prop后未触发对应视图更新。

方案1：补全依赖并优化回调定义 #

首先将两个事件回调通过useCallback包裹，避免每次渲染生成新的函数实例：

const onSoundPress = useCallback((sound) => {
  // 原有业务逻辑
}, [/* 回调依赖的状态/变量 */])

const onPlacePress = useCallback((place) => {
  // 原有业务逻辑
}, [/* 回调依赖的状态/变量 */])

之后将两个回调补入useMemo的依赖数组，确保状态变化时会重新生成组件实例：

const TABS = useMemo(
    () => [
      {
        title: "Sounds",
        id: "sounds",
        component: (
          <Sounds
            soundsBeingPlayed={soundsBeingPlayed}
            onSoundPress={onSoundPress}
          />
        ),
      },
      {
        title: "Places",
        id: "places",
        component: (
          <Places
            onPlacePress={onPlacePress}
            soundsBeingPlayed={soundsBeingPlayed}
          />
        ),
      },
    ],
    [soundsBeingPlayed, onSoundPress, onPlacePress] // 补全所有用到的依赖
  )

同时注意更新soundsBeingPlayed时必须返回新的引用，比如数组更新写法为：

setSoundsBeingPlayed(prev => [...prev, newSound])

不要直接修改原数组。

方案2：调整传递逻辑，在Tabs内部实例化组件 #

该方案可以从根源避免闭包、依赖漏写的问题，可维护性更高。
首先修改TABS的定义，不直接传递实例化后的组件，改为传递组件本身和对应的props：

const TABS = useMemo(
    () => [
      {
        title: "Sounds",
        id: "sounds",
        component: Sounds,
        componentProps: {
          soundsBeingPlayed,
          onSoundPress
        }
      },
      {
        title: "Places",
        id: "places",
        component: Places,
        componentProps: {
          onPlacePress,
          soundsBeingPlayed
        }
      },
    ],
    [soundsBeingPlayed, onSoundPress, onPlacePress]
)

之后在Tabs组件内部渲染时再完成组件实例化：

// Tabs组件内部逻辑示例
const Tabs = ({ tabs }) => {
  const [activeId, setActiveId] = useState(tabs[0].id)
  const activeTab = tabs.find(item => item.id === activeId)
  const ActiveComponent = activeTab.component

  return (
    <div>
      {/* 标签栏导航渲染逻辑 */}
      <ActiveComponent {...activeTab.componentProps} />
    </div>
  )
}

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