将React的状态setter传递给辅助函数存在哪些弊端？

• 耦合度过高：辅助函数完全和传入的setter绑定，无法独立运行。如果后续组件的状态结构调整（比如新增关联状态、修改setter命名），你需要同步修改所有调用辅助函数的位置、以及辅助函数本身的入参定义，维护成本随逻辑复杂度上升极速增加。
• 状态逻辑碎片化：计数器相关的状态定义在组件内，更新逻辑散落在多个外部辅助函数文件中，排查bug时需要在多个文件来回跳转，项目规模变大后维护难度极高，新人接手也很难快速理清状态流转链路。
• 容易写出不符合React规则的代码：比如你当前increment函数中在setCounter的更新回调里调用setEven，虽然当前运行没问题，但这种跨setter的调用逻辑很容易后续被改出问题——比如不小心在同步逻辑里多次调用多个setter、或者产生闭包陷阱导致拿到过期的状态值，排查成本很高。
• 复用性极低：这套计数器逻辑如果要在其他组件复用，你需要重复写2个useState定义，再手动把两个setter传给辅助函数，重复代码很多。

你后续换成useCounter自定义Hook的方案是当前场景的最优解，优势非常明显：

• 内聚性强：所有和计数器相关的状态定义、更新逻辑都封装在同一个Hook文件里，调整逻辑只需要修改这一个文件，不会出现逻辑散落在各处的问题。
• 复用成本低：其他组件需要计数器能力时，直接引入useCounter调用即可，不需要重复写状态定义和更新逻辑。
• 符合React设计规范：Hook和组件生命周期对齐，天然避免闭包等常见问题，也能很好适配后续的React新特性。

额外提一个小优化点：even状态其实不需要单独存储，它完全是counter的派生值，直接通过counter % 2 === 0计算即可，这样可以少维护一个状态，也不会出现两个状态不同步的潜在问题，优化后的useCounter可以写成：

import { useState } from "react";

const useCounter = () => {
  const [counter, setCounter] = useState(0)
  // 直接从counter派生even，不需要单独的state
  const even = counter % 2 === 0

  const increment = () => {
    setCounter(current => current + 1)
  }

  const reset = () => {
    setCounter(0)
  }

  return { counter, even, increment, reset }
}

export default useCounter

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