自定义Hook内部state变化会导致调用它的组件重渲染吗？

会触发调用该自定义Hook的组件重新渲染。

首先得搞清楚React自定义Hook的本质：它只是用来抽离公共逻辑的普通函数，既没有独立的组件上下文，也没有独立的状态托管能力。你在自定义Hook内部调用useState创建的状态，最终是直接挂载到调用这个Hook的组件实例上的，和你直接在组件函数顶层写useState没有任何运行时差异。

举个最直观的验证例子：

import { useState, useEffect } from 'react'

// 无任何返回值的自定义Hook
function useHiddenCounter() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    // 每秒更新一次内部维护的状态
    const timer = setInterval(() => {
      setCount(prev => prev + 1)
    }, 1000)
    return () => clearInterval(timer)
  }, [])
}

// 调用上述Hook的测试组件
export default function TestComp() {
  useHiddenCounter()
  console.log('组件触发重渲染')
  return <div>测试组件</div>
}

实际跑这段代码就能看到，控制台每秒都会打印一次“组件触发重渲染”——哪怕Hook没有返回任何值，组件本身也完全没用到count这个状态，只要内部状态发生更新，组件就会进入重渲染流程。

这里顺便澄清一个常见误区：

• 不存在“状态没被组件消费，更新就不会触发重渲染”的逻辑。只要组件持有的状态发生变更（也就是调用状态setter时传入的新值和旧值做Object.is比较不相等），React就会调度该组件的重渲染，这个逻辑和状态是不是定义在自定义Hook里、有没有被Hook返回、有没有在JSX中使用都没有关系。
• 唯一会跳过渲染的场景：如果你调用状态setter时传入的值和当前状态完全相等（Object.is判断结果为true），React会自动跳过该组件及其子组件的重渲染，这个规则同样和Hook有没有返回值无关。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture