| HN Mirror

useCallback memoizes (caches) the function definition. Its main use is to simplify refreshes — since the function isn't redefined every time, components that depend on it such as the <button> can be re-rendered less often.

    const handleClick = useCallback(() => {
        const modifier = counterType === "Increment" ? 1 : -1
        setCounter(counter + modifier)
        onClick()
    }, [onClick, counter, counterType, modifier])

The array at the end is the list of "dependencies" — whenever one of them changes, the function is re-cached. Compiler checks can catch missing dependencies. You might think, "But that function will be redefined pretty much every time," and in this case that's true, and memoization may not help much. But in bigger trees of components, most redraws will be unrelated to any given element, so those dependencies will rarely change.

useCallback() (and its twin useMemo(), for non-functional values) gets more useful in deeper component trees, where values may be passed down several levels.