React自定义Hook必须使用内置Hook吗？工具函数转Hook的正确方式

核心结论 #

自定义Hook不强制要求使用内置Hook，但必须遵循两个规则：

1. 函数名必须以use开头
2. 只能在组件顶层或其他自定义Hook内部调用

对你的两种实现方式的分析 #

1. 仅重命名工具函数为useXXX的方式

这种写法是语法合法的，React不会报错，但从设计角度来说，这类纯同步计算的逻辑更适合作为普通工具函数，而非自定义Hook。因为自定义Hook的核心价值是复用包含React状态或副作用的逻辑，纯计算逻辑用普通函数更轻量化、更直观。

你的示例代码中，useCheckEven这类函数只是接收参数返回计算结果，没有依赖React的状态、生命周期或副作用，完全不需要包装成Hook，保持原来的普通工具函数写法就很好。

2. 用useState+useEffect包裹的方式

这种写法是冗余且不推荐的。对于纯同步计算的场景，引入useState和useEffect会带来额外的状态更新和组件重渲染：每次num变化时，useEffect触发，更新状态，又会触发一次组件渲染，完全是没必要的性能损耗。

只有当你的逻辑需要处理副作用（比如异步请求、订阅事件）、状态管理（需要在Hook内部维护状态）时，才需要使用内置Hook来封装成自定义Hook。

什么时候需要写自定义Hook？ #

当你需要复用的逻辑涉及以下场景时，自定义Hook才是合适的选择：

• 需要维护内部状态（比如useState）
• 需要处理副作用（比如useEffect、useLayoutEffect）
• 需要使用其他React内置Hook（比如useContext、useReducer）
• 需要封装复杂的状态逻辑（比如表单校验、数据订阅）

针对你的场景的优化建议 #

保持你的工具函数为普通函数即可，不需要改成自定义Hook：

// 普通工具函数，简洁高效
function checkEven(num) {
  return num % 2 === 0;
}

function checkIsAboveHundred(num) {
  return num > 100;
}

function checkPrime(num) {
  for (let i = 2, s = Math.sqrt(num); i <= s; i++) {
    if (num % i === 0) return false;
  }
  return num > 1;
}

如果一定要封装成自定义Hook（比如团队规范要求），仅重命名的方式是可行的，但不要额外添加useState和useEffect。

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