# 关于React useCallback使用的问题?

React中的useCallback

下面的代码中Com是父组件，Button是子组件，子组件接收父组件的count2和setCount2，子组件中使用了memo(Button)导出

function Com() {
    const [count1, setCount1] = useState(0)
    const [count2, setCount2] = useState(0)

    const handleClick1 = () => {setCount1(i => i + 1)}
    const handleClick2 = () => {setCount2(i => i + 1)}

    // const callbackSetCount2 = useCallback(() => {
    //     setCount2(i => i + 1)
    // }, [count2])

    console.log("$$ ComA render")

    return (
        <div className="addBorder">
            <h1>this is ComA</h1>
            <p>{count1}</p>
            <button handleClick={() => setCount1(i => i + 1)}>count1 ++</button>
            <p>count2</p>
            <Button handleClick={handleClick2}>{count2}</Button>
        </div>
    )
}

子组件Button

function Button({ handleClick, children }) {
    console.log(`$$ Rendering button` + children)
    return (
        <div className="addBorder">
            <p>this is Button.jsx</p>
            <button onClick={handleClick}>{children}</button>
        </div>
    )
}

export default memo(Button)

在上面的代码中，如果点击count1++的按钮（不使用useCallback），父组件会重新渲染，但是子组件也会刷新，然而子组件中的count2依赖没有变化，所以只能是handleClick2函数变化了，这只能是因为父组件重新渲染导致了const handleClick2 = () => {setCount2(i => i + 1)}这一行重新运行。
所以我们需要使用useCallback来将handleClick2函数缓存，不会因为重新渲染而导致没有必要的刷新，这样做之后，点击count1++的按钮也不会导致子组件刷新了。
这是我对上面代码以及重新渲染机制以及useCallback的理解，这样理解对吗？

希望理解useCallback以及setState之后的更新机制，谢谢各位大佬了