如何让派生状态变量随依赖项自动更新？无需useEffect手动维护

1. 使用useMemo（纯计算场景最优解） #

如果someCustomState完全由a和b推导而来，不需要手动修改它的值，直接用useMemo就能实现自动更新，完全替代useEffect + useState的写法：

function SomeComponent() {
  const [a, aSetter] = useState<boolean>(false)
  const [b, bSetter] = useState<boolean>(false)

  // 依赖a、b变化时自动重新计算值
  const someCustomState = useMemo(() => a && !b, [a, b])
}

useMemo会缓存计算结果，只有当依赖数组里的a或b发生变化时，才会重新执行回调函数生成新值，是声明式的一行代码实现需求。

2. 自定义Hook（支持手动修改派生状态的场景） #

如果业务中除了依赖a/b自动更新外，还需要手动修改someCustomState的值，可以封装一个自定义Hook，把内部的useEffect逻辑隐藏起来，组件里只需一行调用：

// 封装自定义Hook
function useDerivedState(computeFn, dependencies) {
  const [state, setState] = useState(computeFn())

  useEffect(() => {
    setState(computeFn())
  }, dependencies)

  return [state, setState]
}

// 组件中使用
function SomeComponent() {
  const [a, aSetter] = useState<boolean>(false)
  const [b, bSetter] = useState<boolean>(false)

  // 一行代码搞定自动更新+手动修改能力
  const [someCustomState, someCustomStateSetter] = useDerivedState(() => a && !b, [a, b])
}

这种方式既满足了a/b变化时自动更新的需求，又保留了手动修改状态的能力，同时避免了在组件里重复编写useEffect逻辑。

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