无需useEffect，基于两个props更新单个state值的最优方案

从性能角度出发，我们不应该通过useEffect来同步Props到State——这种做法会导致额外的组件渲染，影响性能。那当parentItems或childItems这两个Props发生变化时，更新currentItems这个State的最佳方式是什么？

先看原代码的问题示例：

const NestedList = ({childItems, parentItems, selected, ...rest}) => {
  const [currentItems, setCurrentItems] = useState({}); // 假设这是一个哈希对象
  
  // 不推荐的写法 ❌
  useEffect(() => setCurrentItems(parentItems), [parentItems])

  // 不推荐的写法 ❌
  useEffect(() => setCurrentItems(childItems), [childItems])

  return ...
}

最优方案：用useMemo派生状态 #

如果currentItems的值完全由Props（或其他组件内状态）决定，根本不需要单独维护一个State。直接用useMemo缓存派生结果即可，这是性能最优的选择——既避免了额外的状态同步逻辑，也不会触发不必要的二次渲染。

示例代码：

const NestedList = ({childItems, parentItems, selected, ...rest}) => {
  // 根据业务逻辑（比如selected的值）决定使用哪一组数据
  const currentItems = useMemo(() => {
    return selected ? childItems : parentItems;
  }, [childItems, parentItems, selected]); // 仅当依赖项变化时重新计算

  return ...
};

备选方案：合并useEffect逻辑（仅当需要本地状态时） #

如果currentItems需要作为组件内部可修改的本地状态（比如后续要在组件内修改，不依赖Props），那可以把两个Props的监听合并到同一个useEffect中，避免多个副作用导致的多次状态更新和渲染。

示例代码：

const NestedList = ({childItems, parentItems, selected, ...rest}) => {
  const [currentItems, setCurrentItems] = useState(parentItems); // 初始值设为parentItems

  useEffect(() => {
    // 根据业务逻辑生成新的items
    const newItems = selected ? childItems : parentItems;
    
    // 可选：添加值比较，避免无意义的状态更新（需要根据数据结构选择浅/深比较）
    if (!Object.is(currentItems, newItems)) {
      setCurrentItems(newItems);
    }
  }, [childItems, parentItems, selected, currentItems]);

  return ...
};

总结 #

• 优先选择useMemo派生状态：这是最符合React设计理念、性能最优的方式，因为它避免了维护额外的状态同步逻辑。
• 必须用本地状态时，合并useEffect的依赖：在一个副作用中处理所有相关Props的更新逻辑，减少不必要的渲染次数。

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